javascript 父子iframe相互传参数

超、凢脫俗 2022-06-13 08:29 434阅读 0赞

前端开发的过程中。可能用iframe去嵌套html页面。

当我们在父iframe中传递参数去给子iframe的时候。  
我们可以通过将参数对象设置成子类iframe的window对象的成员变量。

<iframe id="childFrame" src="iframeChild.html">
    
    </iframe>
    
    
    <script type="text/javascript"> var childFrameObj = document.getElementById('childFrame'); childFrameObj.contentWindow.paramFromParent = 'userId0007'; </script>

子iframe可以通过访问window对象的成员变量来得到从父iframe中传递来的参数。

var param = window.paramFromParent;
        var inputObject =  document.getElementsByTagName('input')[0];
        inputObject.value = param;

父类iframe全部代码  
iframeParent.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <iframe id="childFrame" src="iframeChild.html">
    
    </iframe>
    
    
    <script type="text/javascript"> var childFrameObj = document.getElementById('childFrame'); childFrameObj.contentWindow.paramFromParent = 'userId0007'; </script>
    
    </body>
    </html>

子iframe的全部代码是  
iframeChild.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    
    
    
    <body>
            <input type="text" value="" >
    </body>
    
    
    <script type="text/javascript"> var param = window.paramFromParent; var inputObject = document.getElementsByTagName('input')[0]; inputObject.value = param; </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，434人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件使用之父子间相互传值

vue父子组件之间相互传值：一、组件：组件就是一个个vue文件。将一个网页拆成一个个模块写在不同的vue文件中。在主页面中进行拼接。 ![在这里插入图

朱雀/ 2023年10月04日 22:18/ 0 赞/ 160 阅读

相关 WebView与Javascript交互（相互调用参数、传值）

现在很多App里都内置了Web网页（Hyprid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图 ![Center][] 京东首页上述功能是由

╰半夏微凉°/ 2023年03月04日 06:52/ 0 赞/ 7 阅读

相关 iframe父子页面通信

iframe获取当前子页面url parent.document.getElementById("ID name").contentWindow.location

冷不防/ 2022年12月23日 13:28/ 0 赞/ 248 阅读

相关 iframe父子兄弟之间调用传值(contentWindow && parent)

iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法）主页面调用iframe； iframe页面调用主页面；

╰+攻爆jí腚メ/ 2022年08月14日 04:39/ 0 赞/ 216 阅读

相关 javascript 父子iframe相互传参数

前端开发的过程中。可能用iframe去嵌套html页面。当我们在父iframe中传递参数去给子iframe的时候。我们可以通过将参数对象设置成子类iframe的win

超、凢脫俗/ 2022年06月13日 08:29/ 0 赞/ 435 阅读

相关 html中嵌入iframe进行父子页面参数传递

实现的主要原理是： 1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（\[参数列表\]） 2.子页面调用父页面函数，win

àì夳堔傛蜴生んèń/ 2022年05月18日 04:46/ 0 赞/ 645 阅读

相关 vue基础语法以及父子组件如何相互传值

vue模板引擎语法，关注数据层面 1. Mustache语法:\{ \{msg\}\} 主要是用date控制 2. html赋值：v-html=”“ 3. 绑定属性

Bertha 。/ 2022年05月09日 04:16/ 0 赞/ 182 阅读

相关 react 父子组件之间相互传值

From: [https://blog.csdn.net/luzhaopan/article/details/85003362][https_blog.csdn.net_luz

深藏阁楼爱情的钟/ 2021年12月09日 23:11/ 0 赞/ 313 阅读

相关 JQuery javascript实现父子页面相互调用

javascript实现父子页面相互调用 By:授客 QQ：1033553122 ![1569452-20190718124645203-223680087.png

古城微笑少年丶/ 2021年11月13日 19:30/ 0 赞/ 384 阅读

相关 iframe嵌套，父子页面之间变量，方法，元素的相互调用使用介绍

子页面：父页面取子页面的全局变量： var 变量名称= document.getElementById(‘XXX’).contentWindow.变量名称; 父页面调...

红太狼/ 2021年01月19日 09:00/ 0 赞/ 631 阅读