Jquery 调用iframe中的js
Posted 夏侯胖墩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 调用iframe中的js相关的知识，希望对你有一定的参考价值。
在工作中要在html中嵌入iframe 并且调用其中的js方法。
网上找的demo都是 html中一个点击事件的方法中调用到iframe中的js.
点击触发后，此时iframe早已被渲染完成，所以这么干是可行的。
现在我遇到的情况是在没有任何操作的前提下，html加载后就调用iframe中的js.
以下利用到 Jquery的load()方法，待iframe加载完成后，调用其js.
parent.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ifram测试</title> 6 <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> 7 </head> 8 <body> 9 10 <iframe id="iframe1" src="child.html" height="500px" width="500px"> 11 </iframe> 12 <script> 13 $(document).ready(function(){ 14 $("#iframe1").load(function(){ 15 $("#iframe1")[0].contentWindow.sayHello(‘hello world‘); 16 }); 17 18 }); 19 </script> 20 </body> 21 </html>
child.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 8 <p>这是iframe页面 </p> 9 <script> 10 function sayHello(text){ 11 console.info(text); 12 } 13 </script> 14 </body> 15 </html>
以上是关于Jquery 调用iframe中的js的主要内容，如果未能解决你的问题，请参考以下文章
iframe子页面js调用父页面中的控件报“拒绝访问”是啥原因，怎么解决？先声明不是跨域问题