iframe父子兄弟之间通过jquery传值(contentWindow && parent)

最新推荐文章于 2024-07-11 14:51:27 发布
最新推荐文章于 2024-07-11 14:51:27 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： javascript 文章标签： frame 之间传值
iframe父子兄弟之间通过jquery传值(contentWindow && parent)，iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法）
主页面调用iframe；
iframe页面调用主页面；
主页面的包含的iframe之间相互调用；
主要知识点
1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了；
2：$("#ii")[0].contentWindow  如果用jquery选择器获得iframe，需要加一个【0】；
3：$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;
4：$("#ii") [0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数，在iframe页面window.hellobaby就可以获取到值，hellobaby是自定义的变量；
5：在iframe页面通过parent可以获得主页面的window，接着就可以正常访问父亲页面的元素了；
6：parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的iframe得到window进行操作；



main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>显示图表</title> 
<script src="http://www.ablanxue.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 
    var gg="dsafdsafdsafdsafsdaf"; 
    function ggMM() { 
        alert("2222222222222222222222222222222"); 
    } 
    function callIframeMethod() { 
        //document.getElementById("ii").contentWindow.test(); 
        $("#ii")[0].contentWindow.test(); //用jquery调用需要加一个[0] 
    } 
    function callIframeField() { 
        alert($("#ii")[0].contentWindow.ff); 
    } 
    function callIframeHtml() { 
        alert($("#ii")[0].contentWindow.$("#dd").val()); 
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value); 
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);              
    }    
    function giveParameter() { 
        $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 
    } 
</script> 
</head> 
<body> 
    <a href="#" onClick="giveParameter();">参数传递</a> 
    <a href="#" onClick="callIframeMethod();">调用子iframe方法</a> 
    <a href="#" onClick="callIframeField();">调用子iframe变量</a> 
    <a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>   
    <iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe> 
    <iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe> 
</body> 
</html> 




frame.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>显示图表</title> 
<script src="http://www.ablanxue.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 
var ff="adfdasfdsafdsafdsaf"; 
function test() { 
    alert($("#dd").val()); 
} 
function callMainField() { 
    alert(parent.gg); 
} 
function callMainMethod() { 
    parent.ggMM(); 
} 
function callMainHtml() { 
    alert(parent.$("#ii").attr("id")); 
} 
function getParameter() { 
    alert(window.hellobaby); 
} 
</script> 
</head> 
<body> 
    <a href="#" onClick="getParameter();">接受参数</a> 
    <a href="#" onClick="callMainMethod();">调用子iframe方法</a> 
    <a href="#" onClick="callMainField();">调用主窗口变量</a> 
    <a href="#" onClick="callMainHtml();">调用子iframe组件</a>    
    <input id="dd" type="text" value="http://www.ablanxue.com"/> 
</body> 
</html> 


兄弟iframe页面 newIframe.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.ablanxue.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function callLevelFrame() {
    var ff=parent.$("#ii")[0].contentWindow.ff;
    alert(ff);
}
</script>
</head>
<body>
<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>    
<input id="nn" type="text" value="sdafsdfsa"/>
</body>
</html>
yzp_soft
关注
专栏目录
实现iframe父子页面传值
yans121的博客
10-13 382
父页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>parent</title> </head> <body style="ove.
iframe页面向父页面传值——postMessage用法
qq_40678503的博客
06-11 2778
最近在做系统的迁移，需要将老的系统作为iframe嵌入到新系统中，其中某些信息需要通过iframe的页面传到父页面中，调用contentWindow，因为新系统和老的系统域名不一样，会报跨域问题，最后选择了postMessage这种方法。 用法： iframe的页面中： window.parent.postMessage(你要传递的值,传递到那个域名); 如: window.parent.postMessage('变量a','http://xxx.com'); 我是使用的vue，所以在create中监听
jQuery 父iframe与子iframe 相互调用传值
热门推荐
WD4871的博客
01-14 1万+
jQuery 父iframe与子iframe 相互调用传值
iframe父传子如何传值
最新发布
MISS_zhang_0110的博客
07-11 309
【代码】iframe父传子如何传值。
iframe父子页面传值
lwkjob的专栏
07-19 107
[size=xx-large]1）在iframe中查找父页面元素的方法： $('#id', window.parent.document) 2）在iframe中调用父页面中定义的方法和变量： parent.method parent.value 3）父页面获得子页面的方法 window.frames["iframe的ID"].updateSubmit();[/size]...
layer弹出子iframe层父子页面传值的实现方法
10-17
因此，子页面和父页面之间并不直接存在DOM树的父子关系，这就使得传统的window.parent对象或document.referrer等方法不适用于它们之间的数据传递和方法调用。 为了实现父页面向子iframe页面传递数据或调用子页面的...
使用jquery/js获取iframe父子级、同级获取元素的方法
12-02
- **方法一**：通过`window.frames`属性，我们可以访问到`iframe`中的`window`对象，然后使用`document.getElementById`找到需要的元素。例如： ```javascript window.frames["ifm"].document.getElementById(...
如何实现iframe父子传参通信
10-15
在网页开发中，有时我们需要在不同的页面之间传递参数，特别是在使用`iframe`嵌套页面时。`iframe`的父子通信可以让我们实现不同页面间的交互，无论是同源策略下的非跨域通信，还是需要应对跨域场景。下面我们将详细...
jQuery实现frame之间互通的方法
10-19
在jQuery中，实现frame之间的通信主要涉及到两个关键点：父框架（parent frame）和子框架（child frame）。在父框架中定义一个可供调用的公共方法，然后在子框架中调用这个方法。 1. **父框架中的方法定义：** ```...
iframe父子传值
03-27
对于Iframe的父窗体与子窗体互相传值
iframe父子页面传值(小案例)
lqlq54321的博客
04-27 170
iframe.html <button id="send">确认事件</button> <div id="content"></div> window.onload = function() { var btn = document.getElementById("send"); var transObj = { target: "求救事件", content: "有人晕倒了" };
iframe 父子页面之间传值
cc
01-24 1103
1.父页面给子页面传值 父页面 /** * 发送消息 * @key 字段名 * @value 值 */ postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, ifra
vue项目使用 iframe 父子页面传值。
weixin_45665171的博客
09-18 1482
vue项目使用 iframe 父子页面传值。
使用iframe的父子页面进行简单的相互传值
time141的博客
09-02 7030
使用iframe标签嵌套页面时，通过再父页面通过接口请求的数据，如何传给子页面呢？作为一个刚刚入门的前端小白，只有边百度边写demo，研究一下iframe的父子页面的传值，如果有什么不对的地方请大家指出。 父页面：father.html,子页面:son.html 1、 ...
iframe 父子级传值
henghahouhei的博客
10-09 137
父级： 接收消息： window.addEventListener('message', function(e){ console.log('父级接收消息------->',e) }, false); 发送消息： <button @click="getInfo">发送消息</button> info:{ message: "Hello Son!" } getInfo(){ var sonIframe= document.get
jQuery传值
yxd2014xd的博客
09-30 855
1、前台传值给后台，后台返回字符串 $.get("Default.aspx", { typeName: "action", name: "John", time: "2pm" }, function (data) { //此处是回调函数 接收从后台传回的值 alert(data); //接回来的
Jquery传值
liuhaoxin666的博客
04-01 534
jquery传值 1. 首先需要引入jquery库，引入也分为两种情况，我用的是引入的方法 添加引用 <script type="text/javascript" src=jquery-1.8.0.min.js></script> 2. 语法 $.get('"http://127.0.0.1:8080/test?age=20',function(result...
解决IE下jQuery重置iframe源引发的内存泄漏问题
然而，在IE浏览器中，尤其是较旧版本，由于浏览器的实现机制，当通过jQuery或其他JavaScript库修改iframe的`src`属性时，可能会导致内存无法正确释放，从而引发内存泄漏。 问题的根源在于IE浏览器的内存管理机制，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值