html_iframe与父级窗口之间的数据传递(window和document)

简介: iframe传递参数

iframe到上一层窗口

思路:
1.修改顶层窗口的href为ireame的url
2.修改顶层窗口的document为ifream的document

代码部分

方法:使用window.parent.location.href

修改父级的href
window.parent.location.href

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试</title>
    </head>
    <style>
        *{
    
    
            margin:0;
            padding:0;
        }
        body{
    
    
            width:100vw;
            height: 100vh;
        }
    </style>
    <body>
        <p>ifream窗口</p>
        <button onclick="test()">ifream跳出</button>
    </body>
    <script type="text/javascript">
        function test(){
    
    
            window.parent.location.href='http://127.0.0.1:8848/temp_file/child.html'
        }
    </script>
</html>

调用ifream的网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>home</title>
    </head>
    <style>
        *{
    
    
            margin:0;
            padding:0;
        }
        body{
    
    
            width:100vw;
            height: 100vh;
        }
        .child{
    
    
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <p>父级窗口</p>
                <div class="box">
            <iframe src="child.html" class="child" id='iframe1'></iframe>
        </div>
    </body>
</html>

image.png

传递数据(ifreame到父级窗口)

contentWindow的使用

思路:传递window对象
ifream的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试</title>
    </head>
    <style>
        *{
    
    
            margin:0;
            padding:0;
        }
        body{
    
    
            width:100vw;
            height: 100vh;
        }
    </style>
    <body>
        <p>ifream窗口</p>
        <button onclick="test()">ifreaamwindow</button>
        <p>发送的数据:windwo.postMapdata={name:'yma16'}<p>
    </body>
    <script type="text/javascript">
        function test(){
    
    
            window.postData={
    
    name:'yma16',pwd:'life'}
        }
    </script>
</html>

调用ifream的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>home</title>
    </head>
    <style>
        *{
    
    
            margin:0;
            padding:0;
        }
        body{
    
    
            width:100vw;
            height: 100vh;
        }
        .child{
    
    
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <p>父级窗口</p>
        <button onclick="getchild()">获取ifream的window</button>
        <hr>
        <p>父级数据显示</p>
        <input type="text" value='' id="parent_input" />
        <hr>
        <div class="box">
            <iframe src="child.html" class="child" id='iframe1'></iframe>
        </div>
    </body>
        <script type="text/javascript">
            function getchild(){
    
    
                document.getElementById('parent_input').value=JSON.stringify(document.getElementById('iframe1').contentWindow.postData)
                console.log("获取ifream的windows和documnet",document.getElementById('iframe1'));
                console.log('ifream的window',document.getElementById('iframe1').contentWindow)
                console.log('ifream的window的postMapData',document.getElementById('iframe1').contentWindow.postData)
                console.log('ifream的document',document.getElementById('iframe1').contentDocument)
            }
        </script>
</html>

image.png

跨域传递参数

ifreame界面,使用window.parent.postMessage(data,'ip+port')

window.parent.postMessage(data,'*')

父级窗口添加监听事件获取数据

window.addEventListener('message',this.listenIfreame())
listenIfreame:function(e){
   
   
console.log('message',e,e.data);
}
目录
相关文章
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
55 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
2月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
46 1
|
17天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
99 1
|
2月前
|
XML 移动开发 JSON
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
本文介绍了Twaver HTML5中的数据容器(DataBox),包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象,如ElementBox、LayerBox、AlarmBox等,并通过示例代码展示了其常用方法的使用。
46 1
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(2)基本数据元素(Data)
本文介绍了Twaver HTML5中的基本数据元素,包括Data、Element、Alarm和Layer等,它们分别用来描述拓扑的网元、告警和图层。文章详细解释了Data类的基本属性和方法,并提供了如何在React组件中使用Twaver创建节点和连线的示例代码。
43 1
Twaver-HTML5基础学习(2)基本数据元素(Data)
|
1月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
70 2
|
2月前
|
数据采集 存储 JavaScript
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
在现代网页开发中,复杂的HTML结构给爬虫技术带来挑战。传统的解析库难以应对,而Cheerio和jsdom在Node.js环境下提供了强大工具。本文探讨如何在复杂HTML结构中精确提取数据,结合代理IP、cookie、user-agent设置及多线程技术,提升数据采集的效率和准确性。通过具体示例代码,展示如何使用Cheerio和jsdom解析HTML,并进行数据归类和统计。这种方法适用于处理大量分类数据的爬虫任务,帮助开发者轻松实现高效的数据提取。
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
36 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
1月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
26 0

热门文章

最新文章