关于js调用iframe中函数方法不管用的一些提示

最新推荐文章于 2023-07-05 17:58:16 发布

忘了流泪

最新推荐文章于 2023-07-05 17:58:16 发布

阅读量6.9k

点赞数

分类专栏： web前端文章标签： javascript web前端

web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

记得在我以前写的一篇easyui dialog弹出框的注意事项中写有从iframe页面中调用iframe外面的函数，从而实现iframe子页面向父页面的传值与函数的调用，可以把iframe中的easyui dialog框在最外层显示，而不只是在iframe里，导致别的元素还能点击。

今天遇到个问题需要用js调用iframe里的函数，正好和以前相反。上网上搜了一下，几乎都是以下的例子~~

假如父页面为index.html:

<html> 
<head> 
<script type="text/javascript"> 
function ff(){ 
alert(">>this is index's js function  index.html"); 
} 
</script> 
</head> 
<body> 
<div style="background: lightblue;"> 
This is index page. 
<input type="button" value="run index's function" οnclick="ff();" /> 
<input type="button" value="run inner page's function" οnclick='window.frames["childPage"].sonff();' /> 
</div> 
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 
</body> 
</html>

子页面为inner.html:

<html> 
<head> 
<script type="text/javascript"> 
function sonff(){ 
alert(">>this is inner page's js function"); 
} 
</script> 
</head> 
<body> 
<div style="background: lightgreen;"> 
This is inner page. 
<input type="button" value="run index's function" οnclick='parent.window.ff();' /> 
<input type="button" value="run inner page's function" οnclick="sonff();" /> 
</div> 
</body> 
</html>

这样就可以实现：1.在子页面用js调用父页面的函数方法，从而实现子页面向父页面的传值。2.在父页面用js调用子页面的函数方法，实现父页面向子页面的传值。

但是我见好多人留言说都无法成功调用，其实我一开始时竟然也失败了，原因是一开始我直接把上面的代码复制到了一个html页面中了，并且直接双击打开这个页面，当点击调用iframe页面里的函数的按钮时，console控制台不出意外的报错了，如下：

我猛一看这个错很像我以前出的跨域问题的错误，于是又把那两个html页面放到本地服务器上访问(我用的是wamp，只要把页面放到www目录下访问localhost就好了)，果然没有错了。但是当我点击时，又出错了，如下：