使用 postMessage 解决 iframe 跨域数据传输

比眉伴天荒 2022-03-18 05:56 252阅读 0赞

关于 postMessage 相关描述请参考：  
[简述html 中的 postMessage][html _ postMessage]

iframe 引入的页面若不是同一个 服务器 的，那么在使用 js 访问 iframe 中的内容时，就会遇到跨域问题。

比如如下访问：

window.top.frames["main_frame"].document

报出的问题如下：

VM18888:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame.
        at <anonymous>:1:33

使用 **html5 postMessage** 可以有效的解决这个问题，但后面通过测试，html 也是可以的。

代码如下：  
iframe 引入的子页面添加如下代码：

比如如下子页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    </head>
    
    <body>
    	<h1>
    		This is my JSP page. <br>
    	</h1>
    </body>
    <script type="text/javascript"> window.onload = function() { window.document.onclick = function() { // 向父页面传数据 // 需要注意的是，第一个参数最好是 字符串 window.parent.postMessage("click", "*"); }; }; </script>
    </html>

父页面中添加如下代码来接收 iframe 子页面传输的数据：

// 接收 iframe 传回的click事件
    window.addEventListener('message', function(e){ 
        //e.data就是子页面传过来的第一个参数，这里就是click
        console.log(e.data);
    }, false);

这样就可以解决跨域问题了。

[html _ postMessage]: https://blog.csdn.net/hsl0530hsl/article/details/87719484