iframe 通过 src='xx' 方式渲染 获取 iframe 里面html内容 代码
时间: 2024-04-25 15:22:27 浏览: 147
在 UniApp 中,通过 `<iframe>` 的 `src` 属性加载页面时,由于跨域安全限制,无法直接获取 `<iframe>` 内部的 HTML 内容。但可以通过使用 `postMessage` 方法,在父页面和 `<iframe>` 之间进行通信,从而获取 `<iframe>` 内部的 HTML 内容。
以下是一个示例代码:
在父页面中:
```vue
<template>
<view>
<iframe ref="myIframe" src="https://www.example.com"></iframe>
<button @click="getIframeHtml">获取 iframe 内部 HTML</button>
</view>
</template>
<script>
export default {
methods: {
getIframeHtml() {
const iframeNode = this.$refs.myIframe;
// 向 iframe 发送消息请求获取 HTML 内容
iframeNode.contentWindow.postMessage('getHtml', '*');
},
handleMessage(event) {
if (event.source === this.$refs.myIframe.contentWindow) {
// 判断消息类型是否为 HTML 内容
if (event.data.type === 'html') {
// 在控制台打印 iframe 内部的 HTML 内容
console.log(event.data.html);
}
}
}
},
mounted() {
window.addEventListener('message', this.handleMessage);
},
beforeDestroy() {
window.removeEventListener('message', this.handleMessage);
}
}
</script>
```
在 `<iframe>` 的页面中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Child Page</title>
</head>
<body>
<h1>Hello from Child Page</h1>
<script>
window.addEventListener('message', function(event) {
// 判断收到的消息类型是否为获取 HTML 内容的请求
if (event.data === 'getHtml') {
// 向父页面发送消息,传递 HTML 内容
window.parent.postMessage({ type: 'html', html: document.documentElement.innerHTML }, '*');
}
});
</script>
</body>
</html>
```
在上述示例代码中,父页面中的 `<iframe>` 加载了一个子页面。当点击按钮时,父页面调用 `getIframeHtml` 方法,向 `<iframe>` 发送一个消息请求获取 HTML 内容。
在子页面中,监听来自父页面的消息,并判断收到的消息类型是否为获取 HTML 内容的请求。如果是,则通过 `document.documentElement.innerHTML` 获取整个 HTML 内容,并使用 `window.parent.postMessage` 向父页面发送消息,传递 HTML 内容。
在父页面中,我们通过监听消息的方式,在 `handleMessage` 方法中判断消息来源是否是 `<iframe>`,并判断消息类型是否为 HTML 内容。如果是,则印出 `<iframe>` 内部的 HTML 内容。
通过以上代码,你可以在父页面中通过发送和接收消息的方式,获取到 `<iframe>` 内部的 HTML 内容。
请注意,为了确保安全性,需要在消息传递时进行恰当的验证和过滤。
以上是在 UniApp 中通过 `<iframe>` 的 `src` 属性渲染页面,并获取 `<iframe>` 内部的 HTML 内容的示例代码。根据你的实际需求和项目结构进行相应的修改和使用。
阅读全文