iframe 通过 src='xx' 方式渲染 获取 iframe 里面html内容 代码
时间: 2024-04-25 14:22:27 浏览: 16
在 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 内容的示例代码。根据你的实际需求和项目结构进行相应的修改和使用。
相关推荐
最新推荐
iframe子页面获取父页面元素的方法
在父页面获取iframe子页面的元素 代码如下： 代码如下: $(“#objid”, document.iframes(‘iframe’).document) 或 代码如下: $(document.getElementById(‘iframeId’).contentWindow.document.body).html() $...
iframe 的刷新方式 这样方式更方便
iframe的刷新方式 1. 刷新方式可以使用 javascript 的 document.fr.location.reload() 2. 还有就是修改 document.fr.location.href 也可以实现刷新的功能 例如: 复制代码代码如下: <iframe name=”fr” width...
jQuery获取iframe的document对象的方法
获取iframe的document对象的目的就是进行dom的操作 $(function() { var result = $('#myframe').prop('contentWindow').document; console.log(result); }); 这样输出来的结果是：document对象
jquery如何实现在加载完iframe的内容后再进行操作
怎么实现在加载完iframe的内容后才进行下一步操作，通过jquery可以实现，为iframe添加onload事件，具体如下，喜欢的朋友不妨参考下或许对大家有所帮助
layer弹出层 iframe层去掉滚动条的实例代码
今天小编就为大家分享一篇layer弹出层 iframe层去掉滚动条的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
解释minorization-maximization (MM) algorithm，并给出matlab代码编写的例子
Minorization-maximization (MM) algorithm是一种常用的优化算法，用于求解非凸问题或含有约束的优化问题。该算法的基本思想是通过构造一个凸下界函数来逼近原问题，然后通过求解凸下界函数的最优解来逼近原问题的最优解。具体步骤如下：
1. 初始化参数 $\theta_0$，设 $k=0$；
2. 构造一个凸下界函数 $Q(\theta|\theta_k)$，使其满足 $Q(\theta_k|\theta_k)=f(\theta_k)$；
3. 求解 $Q(\theta|\theta_k)$ 的最优值 $\theta_{k+1}=\arg\min_\theta Q(
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。