iframe的坑
Posted xunhanliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe的坑相关的知识，希望对你有一定的参考价值。
通信例子
parent:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>MathJax v3 with interactive TeX input and HTML output</title> <script src="./js/jquery.min.js"></script> </head> <body> <iframe id="child" src=‘./child.html‘ width="800" height="600px" onload="echartIframeOnLoad()"></iframe> <script> function echartIframeOnLoad(e) { document.getElementById(‘child‘).contentWindow.postMessage( ‘我是你爸爸3‘, ‘*‘ ); } $(function () { document.getElementById(‘child‘).contentWindow.postMessage( ‘我是你爸爸1‘, ‘*‘ ); }); setTimeout(() => { document.getElementById(‘child‘).contentWindow.postMessage( ‘我是你爸爸2‘, ‘*‘ ); }, 500) window.addEventListener(‘message‘, function (e) { // console.log(‘收到消息，child说‘) var d = e.data; //e.data 里面有自己所传的所有参数 可以根据参数做自己的判断 console.log(d); }, false); </script> </script> </body> </html>
child:
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <script type="text/javascript"> window.addEventListener(‘message‘, function (e) { var d = e.data; //e.data 里面有自己所传的所有参数 可以根据参数做自己的判断 top.postMessage( { mess: d, from: ‘child‘ }, ‘*‘ ); }); </script> </body> </html>
结果：
消息 "我说你爸爸1"一定收不到。"我是你爸爸2"，当网速很差的时候，也收不到。 所以，父窗口一定要等到iframe加载完成后，才能发送消息！
以上是关于iframe的坑的主要内容，如果未能解决你的问题，请参考以下文章
结合两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后将 iframe src 替换为转换后的 url
那些年，我们在Django web开发中踩过的坑——神奇的‘/’与ajax+iframe上传