调用iframe子页面中的函数
- parent.html
- child.html
- 问题
- 参考

调用iframe子页面中的函数

parent.html

在父页面中，可以通过document.getElementById(id).contentWindow访问子页面，有的浏览器支持document.frames[id],
还可以直接使用name="myIFrame"中的myIFrame作为变量名访问子页面。

<!-- parent.html -->
<html>
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="https://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript">var dialog;var dialogIframe;function appendToDom(html){try{var tempDom = $(html).appendTo(document.body);return tempDom;}finally{tempDom = null;}}//根据id获取iframe的contentWindowfunction getIFrame(id) {return (document.getElementById(id) ? document.getElementById(id).contentWindow : null)|| document.frames[id];}function say(){alert("parent.html");}function callChild(){// myFrame.window.say();// myFrame.window.document.getElementById("button").value="调用结束";console.log("content: ", dialog.content);dialog.content.say();}$(document).ready(function() {window.top.appendToDom("<div id='dialog_1' 'title='hello'></div>");dialog = window.top.$("#dialog_1");dialogIframe = window.top.$("<iframe id='iframe_1' src='child.html' ></iframe>").appendTo(dialog);dialog.content = window.top.getIFrame("iframe_1");});</script>
</head>
<body><input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/><!-- <iframe name="myFrame" src="child.html" /> -->
</body>
</html>

child.html

子页面通过parent访问父页面。

<!-- child.html -->
<html>
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript">function say(){alert("child.html");}function callParent(){parent.say();parent.window.document.getElementById("button").value="调用结束";}</script>
</head>
<body><input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />
</body>
</html>

问题

Blocked a frame with origin “null” from accessing a cross-origin frame.

在chrome中测试出现，属于跨域请求错误，浏览器根据下面规则判断
://:/path/to/page.html
如果protocol,hostname,port不同，则认为是跨域，默认会阻止访问。
可以通过设置浏览器关闭判断。chrome

参考

Invoking JavaScript code in an iframe from the parent page
嵌套iframe页面中的JS调用

调用iframe子页面中的函数相关推荐

JQuery调用iframe子页面函数/对象的方法
JQuery调用iframe子页面函数/对象的方法例子: 父页面有个ID为mainfrm的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: ...
iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
iframe子页面内刷新父页面中另一个iframe子页面
框架页面如下: <div id="aa" style="float: left; height: 500px; border-right-style: solid; ...
js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
js/iframe 子页面调用父页面方法与父页面调用子页方法
博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...
【转】js之iframe子页面与父页面通信
2019独角兽企业重金招聘Python工程师标准>>> iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 ...
iframe子页面与父页面元素的访问以及js变量的访问
后台管理系统嵌套了很多iframe页面,想要取得父页面的元素,需要特殊的写法,总是记不住,写下来方便寻找 // eg:iframe页面找父页面的 #nav $('#nav',parent.docume ...
iframe子页面操作父页面
2019独角兽企业重金招聘Python工程师标准>>> 最近经常用到iframe,用的最多的就是在子页面中操作父页面的方法或变量等,总结了用到的几种方法,如下: var tableN ...
iframe子页面position的fixed
前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面 ...

调用iframe子页面中的函数

调用iframe子页面中的函数

parent.html

child.html

问题

参考

调用iframe子页面中的函数相关推荐

最新文章

热门文章