在vue中获取使用iframe嵌入第三方网页下的标签，有啥方法，只能获取到iframe，无法拿到它里面的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo2</title>
<script src="vue.js"type="text/javascript" charset="utf-8"></script>
<script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="app" >
<h2>例子</h2>
<iframe id="myIframe"
src="https://www.baidu.com/"
style="width: 400px;height: 300px;"
></iframe>
<button @click="get">获取页面内容</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
methods: {
get(){
let obj = $('#myIframe').contents().find('#u1');
console.log(obj);
},
}
})
</script>
</body>
</html>
【以下回答由 GPT 生成】
当您在Vue中嵌入第三方网页并使用iframe时，由于浏览器的同源策略，直接在Vue组件中获取嵌入网页的标签元素是不允许的。但是，可以通过一些间接的方法来实现此目的。以下是一种解决方案：
function getIframeContent(url) {
return new Promise((resolve, reject) => {
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.display = 'none';
// 等待iframe加载完成
iframe.addEventListener('load', () => {
try {
const content = iframe.contentWindow.document;
resolve(content);
} catch (error) {
reject(error);
} finally {
document.body.removeChild(iframe);
}
});
document.body.appendChild(iframe);
});
}
methods: {
async embedWebsite() {
try {
const content = await getIframeContent('https://example.com');
// 在content中可以使用普通的DOM操作来获取标签元素
const titleElement = content.querySelector('title');
console.log(titleElement.innerText);
} catch (error) {
console.error(error);
}
}
}
上述代码中，我们创建了一个用于获取嵌入网页内容的函数getIframeContent。通过创建一个隐藏的iframe，并监听其load事件，我们可以在iframe加载完成后获取到嵌入网页的标签元素。在Vue组件的方法中，您可以调用getIframeContent函数并使用普通的DOM操作来获取网页中的元素。
需要注意的是，由于嵌入的网页可能存在跨域问题，因此依赖于网页内容的操作仍然受到同源策略的限制。如果目标网页与当前网页不同域，则无法通过直接访问嵌入网页的标签元素来进行进一步操作。此时，您可能需要与第三方网站进行合作或使用其他技术手段来解决该问题。
【相关推荐】