关于javascript：SecurityError：阻止具有原点的帧访问跨源帧 iframejavascriptjquerysame-origin-policy SecurityError: Blocked a frame with origin from accessing a cross-origin frame 我在我的HTML页面中加载</wyn>并尝试使用Javascript访问其中的元素，但是当我尝试执行我的代码时，我收到以下错误： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">SecurityError<span class="sy0">:</span> Blocked a frame with origin<span class="st0">"http://www.<domain>.com"</span> from accessing a cross<span class="sy0">-</span>origin frame.</div></td></tr></tbody></table></div> <p> 你能帮我找一个解决方案，以便我可以访问框架中的元素吗？ </p> <p> 我正在使用此代码进行测试，但徒劳无功： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="javascript codecolorer">$<span class="br0">(</span>document<span class="br0">)</span>.<span class="me1">ready</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br /> <span class="kw1">var</span> iframeWindow <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">"my-iframe-id"</span><span class="br0">)</span>.<span class="me1">contentWindow</span><span class="sy0">;</span><br /> <br /> iframeWindow.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">"load"</span><span class="sy0">,</span> <span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br /> <span class="kw1">var</span> doc <span class="sy0">=</span> iframe.<span class="me1">contentDocument</span> <span class="sy0">||</span> iframe.<span class="me1">contentWindow</span>.<span class="me1">document</span><span class="sy0">;</span><br /> <span class="kw1">var</span> target <span class="sy0">=</span> doc.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">"my-target-id"</span><span class="br0">)</span><span class="sy0">;</span><br /> <br /> target.<span class="me1">innerHTML</span> <span class="sy0">=</span><span class="st0">"Found it!"</span><span class="sy0">;</span><br /> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span><br /> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> <hr> 同源政策</p> <p> 不要与CORS混淆！ </p> <p> 您无法使用JavaScript访问具有不同来源的<wyn><iframe></wyn>，如果您可以这样做，那将是一个巨大的安全漏洞。对于同源策略浏览器阻止尝试访问具有不同源的帧的脚本。 </p> <p> 如果不维护地址的以下部分中的至少一个，则认为原点不同： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer"><span class="sy0"><</span>protocol<span class="sy0">>:</span><span class="co1">//<hostname>:<port>/path/to/page.html</span></div></td></tr></tbody></table></div> <p> 如果要访问框架，协议，主机名和端口必须与您的域相同。 </p> <p>例子</p> <p> 以下是尝试从<wyn>http://www.example.com/home/index.html</wyn>访问以下URL时会发生的情况 </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /></div></td><td><div class="javascript codecolorer">URL RESULT <br /> http<span class="sy0">:</span><span class="co1">//www.example.com/home/other.html -> Success </span><br /> http<span class="sy0">:</span><span class="co1">//www.example.com/dir/inner/another.php -> Success </span><br /> http<span class="sy0">:</span><span class="co1">//www.example.com:80 -> Success (default port for HTTP) </span><br /> http<span class="sy0">:</span><span class="co1">//www.example.com:2251 -> Failure: different port </span><br /> http<span class="sy0">:</span><span class="co1">//data.example.com/dir/other.html -> Failure: different hostname </span><br /> https<span class="sy0">:</span><span class="co1">//www.example.com/home/index.html.html -> Failure: different protocol </span><br /> ftp<span class="sy0">:</span><span class="co1">//www.example.com:21 -> Failure: different protocol & port </span><br /> https<span class="sy0">:</span><span class="co1">//google.com/search?q=james+bond -> Failure: different hostname & protocol</span></div></td></tr></tbody></table></div> <p>解决方法</p> <p> 即使同源策略阻止脚本访问具有不同来源的站点内容，如果您同时拥有这两个页面，则可以使用<wyn>window.postMessage</wyn>及其相对<wyn>message</wyn>事件在两个页面之间发送消息来解决此问题， 像这样： </p> <ul> <li> <p> 在您的主页面中： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br /></div></td><td><div class="javascript codecolorer">let frame <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'your-frame-id'</span><span class="br0">)</span><span class="sy0">;</span> <br /> <br /> frame.<span class="me1">contentWindow</span>.<span class="me1">postMessage</span><span class="br0">(</span><span class="coMULTI">/*any variable or object here*/</span><span class="sy0">,</span> <span class="st0">'*'</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> </li> <li> <p> 在<wyn><iframe></wyn>中(包含在主页中)： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer">window.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">'message'</span><span class="sy0">,</span> <span class="kw1">function</span><span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span> <br /> <br /> <span class="co1">// IMPORTANT: Check the origin of the data! </span><br /> <span class="kw1">if</span> <span class="br0">(</span>~event.<span class="me1">origin</span>.<span class="me1">indexOf</span><span class="br0">(</span><span class="st0">'http://yoursite.com'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> <br /> <span class="co1">// The data has been sent from your site </span><br /> <br /> <span class="co1">// The data sent with postMessage is stored in event.data </span><br /> console.<span class="me1">log</span><span class="br0">(</span>event.<span class="me1">data</span><span class="br0">)</span><span class="sy0">;</span> <br /> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> <br /> <span class="co1">// The data hasn't been sent from your site! </span><br /> <span class="co1">// Be careful! Do not use it. </span><br /> <span class="kw1">return</span><span class="sy0">;</span> <br /> <span class="br0">}</span> <br /> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> </li> </ul> <p> 此方法可以在两个方向上应用，也可以在主页面中创建侦听器，并从帧接收响应。同样的逻辑也可以在弹出窗口中实现，并且基本上由主页面生成的任何新窗口(例如，使用<wyn>window.open()</wyn>)也可以实现，没有任何区别。 </p> <p>在浏览器中禁用同源策略</p> <p> 关于这个主题已经有了一些很好的答案(我只是发现它们谷歌搜索)，所以，对于可能的浏览器，我将链接相关的答案。但请记住，禁用同源策略(或CORS)只会影响您的浏览器。此外，运行具有相同来源安全设置的浏览器会禁止任何网站访问跨源资源，因此它非常不安全，应该仅用于开发目的。 </p> <ul> <li> 谷歌浏览器 </li> <li> 火狐浏览器 </li> <li> Apple Safari：不可能，只有CORS。 </li> <li> 歌剧：不可能。 </li> <li> Microsoft Edge：不可能。 </li> <li> Microsoft Internet Explorer：不可能，只有CORS。 </li> </ul> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> 我发现1,2的任何其他答案都表明CORS / <wyn>Access-Control-Allow-Origin</wyn>不适用于iFrame，仅适用于XHR，字体，WebGL和<wyn>canvas.drawImage</wyn>。我相信<wyn>postMessage</wyn>是唯一的选择。 </li> <li> @snappieT非常感谢，我正在更新问题。 </li> <li> 我将在这里留下这个github.com/ternarylabs/porthole </li> <li> 我第一次在javascript中看到了波形符"?"运算符。对于其他任何不知道它做什么的人：它将-1转换为0，这样你就不必为indexOf的结果做"！= -1"。就个人而言，我认为我将继续使用"！= -1"，因为它更容易让其他程序员理解并避免因忘记使用波形符而导致的错误。(但是学习新东西总是很好。) </li> <li> 如果来源是：yousite.com.mysite.com怎么办？我们应该使用===代替吗？ </li> <li> @ccppjava你不需要===，你已经知道变量类型它是一个字符串，所以===在这里没用。 </li> <li> 如何通过首先跳过导致它的访问来避免异常？更具体地说，我有一个代码针对给定页面的<wyn>window</wyn>对象运行以检查元素，并且在某些页面上脚本因此错误而中断。我无意访问任何对其他窗口/ iframe的引用，并希望在我的代码中安全地忽略它们但没有找到方法这样做！有什么建议？ </li> <li> @SabaAhang只检查<wyn>iframe.src</wyn>，如果该网站与您网域的主机名不同，则您无法访问该框架。 </li> <li> @MarcoBonelli，使用window.postMessage时解决方法，域协议限制是什么？对于实例，是否可以将消息从https源发布到http目标iframe，反之亦然？ </li> <li> @Juliomac当然，只要您拥有两个域，就可以在主域上设置发送方，在帧中设置dimain上的接收方。顺便说一句，浏览器可能会警告您或(最坏情况下)阻止帧加载，如果它是https页面中的http加载，您可能需要先检查它。 </li> <li> 对于简单的情况，另一种解决方法是将GET参数作为<wyn>src</wyn>的一部分传递，并通过<wyn>location</wyn>对象提取它们，ex <wyn><iframe src='foobar.com/?sCSS=color%3Ared'></iframe></wyn> </li> <li> 如果我需要得到一些东西，比如一个字段的值？，我的监听器方法可以返回吗？ </li> <li> @RobertoRodriguez当然，框架内的接收器脚本可以在框架中的页面上执行任何操作，然后使用另一条消息将任何结果发送回主页面。 </li> <li> 这是我的场景，iFrame中的代码向父节点发送消息，然后我需要在相同的执行线程中得到答案(因此父节点向子节点发送另一条消息不是一个选项)。 </li> <li> @RobertoRodriguez这是一个问题的评论部分。如果您想解决问题，请提出问题。 </li> <li> 我想阻止我的浏览器出现这种行为，你知道如何在chrome中禁用它吗？ (我知道这很危险。) </li> <li> @httpete你不能。 </li> <li> 几乎哭了之后，我查看了@parliament建议，并且舷窗库运行良好。如果有人在努力解决这个问题，我会建议你使用它。其他方式实现起来非常混乱，容易出错。我用Asp.Net Mvc实现了没有问题。 </li> <li> @Marco Bonelli正如你所说的"每个浏览器阻止任何试图访问具有不同来源的帧的脚本。"有没有办法在Chrome中禁用此安全功能？ </li> <li> @vigneshsivakumar如果只有你可以花10秒钟使用谷歌...我会把它添加到我的答案顺便说一句。 </li> <li> 美丽！像魅力一样解决我的问题！</li> <li> 波浪号也是反向逻辑。如果找不到url，将返回-1，这将评估为0 = - ( - 1 + 1)，这意味着该块不会运行。如果我没有弄错@MarcoBonelli，ELSE就是你的网站 </li> <li> @Snuggs完全错误，<wyn>~</wyn>返回数字的2的补码，因此<wyn>n</wyn>变为<wyn>-n-1</wyn>，意味着只有<wyn>-1</wyn>将变为<wyn>0</wyn>(被解释为<wyn>false</wyn>)，以及任何其他值将通过测试。 I.E. <wyn>0 = -(-1)-1</wyn>，而不是<wyn>-(-1+1)</wyn>。 </li> <li> @Redzarf：我认为我们可以避免不和！= 1.我们可以把身体放在其他部分，如果部分并将if的身体放入其他部分。 </li> <li> stackoverflow.com/questions/29983786/检查一下 </li> <li> 下面是可以作为<wyn>message</wyn>参数传递到<wyn>postMessage()</wyn>的数据类型的确切列表，尽管"任何变量或对象"是一个合理的摘要。此外，<wyn>if(document.referrer.indexOf(event.origin) == 0)</wyn>是一种动态方法，用于检查iframe的消息是否来自其父窗口。 </li> <li> 实际上，<wyn>document.referrer.indexOf(event.origin) == 0</wyn>不是动态的方法来检查到<wyn><iframe></wyn>的消息是否来自其父<wyn>window</wyn>。 <wyn>document.referrer</wyn>不是您的父<wyn>window</wyn>的URL，如果<wyn>event.origin</wyn>不完全匹配，您将得到误报：如果您有一个页面使用例如<wyn>history</wyn> API更改其<wyn>location</wyn> ，这基本上总会失败。不要这样做，这很糟糕。 </li> <li> @MarcoBonelli嗨，我使用的是代替<iframe>，它不适合我。 <wyn>var embed = document.getElementById('your-embed-id'); embed.contentWindow.postMessage(/*any variable or object here*/, '*'); </wyn>我得到<wyn>Uncaught TypeError: Cannot read property 'postMessage' of undefined</wyn> </li> <li> @ Ng2-Fun <wyn></wyn>与帧无关。 </li> <li> 你怎么解释这个：gyazo.com/caf4dda723bc0afd0baa058172d91573 </li> <li> @MarcoBonelli它阻止来自同一起源的帧。以下是您所说的：example.com/home/other.html - > Success example.com/dir/inner/another.php - >成功 </li> <li> @ZeusZdravkov对不起，我误读了这些网址，好吧它们似乎有相同的来源，但原点不是可以阻止加载框架的东西。没有看到该页面的更多服务器和客户端，没有什么可说的。你应该发布一个更详细的问题。 </li> <li> 您可以使用location.ancestorOrigins [0]来避免硬编码，而不是"h t t p：//yoursite.com"。 </li> <li> @ user2568374这是个糟糕的主意。如果你检查<wyn>event.origin.indexOf(location.ancestorOrigins[0])</wyn>，你基本上允许任何父框架访问你的框架，你可以想象，这是一个非常糟糕的主意。 </li> <li> @Marco Bonelli请解释"任何"和"坏"。我有一个需要访问的父框架。不超过1. iFrame向此父母发布消息。这很好。顺便说一句，我实际上改变了location.ancestorOrigins [0]，它与Chrome一起使用document.referrer，适用于所有浏览器。</li> <li> @ user2568374 <wyn>location.ancestorOrigins[0]</wyn>是父框架的位置。如果您的框架在另一个站点内运行，并且您使用<wyn>event.origin.indexOf(location.ancestorOrigins[0])</wyn>检查，则检查事件的来源是否包含父级的框架地址，该框架地址始终为<wyn>true</wyn>，因此您允许任何具有任何来源的父级访问你的框架，这显然不是你想要做的事情。此外，<wyn>document.referrer</wyn>也是不好的做法，正如我在上面的评论中已经解释的那样。 </li> <li> 我在webview中打开razorpay支付方法，但得到错误："Uncaught SecurityError：阻止带原点的框架"api.razorpay.com"访问具有原始"192.168.0.121"的框架。请求访问的框架具有" https"，被访问的框架具有"http"协议。协议必须匹配。"，来源：checkout.razorpay.com/v1/checkout-frame.js(1)任何想法？ </li> <li> @Neal是的，也许在回答完全相同的问题之前阅读我的回答？而且，你得到的错误已经告诉你到底出了什么问题。你读过它吗？ </li> </ul> <p></div> </div></p></div> <hr> <p> 补充Marco Bonelli的答案：帧/ iframe之间最佳的交互方式是使用<wyn>window.postMessage</wyn>，所有浏览器都支持 </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> 虽然此链接可能会回答这个问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面发生更改，则仅链接答案可能会无效。 - 来自评论 </li> <li> 我不同意，@ AlessandroCuttin。解释<wyn>window.postMessage</wyn>如何工作只会复制我已经引用的已接受答案。此外，我的答案添加的基本价值正是引用外部文档的基本价值。 </li> <li> 如果您可以编辑已接受的答案并将其添加到那里，我认为它会更好 </li> <li> window.postMessage只有当我们能够访问父(我们的HTML页面)和子元素(其他域iframe)时才能使用。否则"没有可能性"，它将始终抛出错误"Uncaught DOMException：Blocked a frame来自"<yourdomainname.com>"的来源访问跨域框架。" </li> </ul> <p></div> </div></p></div> <p><center> <script src="/c1.js"></script></center></p> <hr> <p> 检查域的Web服务器以获取<wyn>X-Frame-Options</wyn>的<wyn>http://www.<domain>.com</wyn>配置<br /> 它是一种旨在防止clickJacking攻击的安全功能， </p> <p>clickJacking如何工作？</p> <li> 恶意页面看起来与受害者页面完全相同。 </li> <li> 然后它欺骗用户输入他们的用户名和密码。 </li> <p> 从技术上讲，邪恶有一个<wyn>iframe</wyn>与受害者页面的来源。 </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="javascript codecolorer"><span class="sy0"><</span>html<span class="sy0">></span><br /> <span class="sy0"><</span>iframe src<span class="sy0">=</span><span class="st0">'victim_domain.com'</span><span class="sy0">/></span><br /> <span class="sy0"><</span>input id<span class="sy0">=</span><span class="st0">"username"</span> type<span class="sy0">=</span><span class="st0">"text"</span> style<span class="sy0">=</span><span class="st0">"display: none;/><br /> <input id="</span>password<span class="st0">" type="</span>text<span class="st0">" style="</span>display<span class="sy0">:</span> none<span class="sy0">;/></span><br /> <br /> <span class="co1">//some JS code that click jacking the user username and input from inside the iframe...</span><br /> <span class="sy0"><</span>script<span class="sy0">/></span><br /> <span class="sy0"><</span>html<span class="sy0">></span></div></td></tr></tbody></table></div> <p>安全功能如何工作</p> <p> 如果要阻止在<wyn>iframe</wyn>中呈现Web服务器请求，请添加x-frame-options </p> <blockquote> <p> X-Frame-Options DENY </p> </blockquote> <p> 选项是： </p> <li> SAMEORIGIN //仅允许我自己的域在iframe中呈现我的HTML。 </li> <li> 拒绝//不允许我的HTML在任何iframe中呈现 </li> <li> "ALLOW-FROM https://example.com/"//允许特定域在iframe中呈现我的HTML </li> <p> 这是IIS配置示例： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer"> <span class="sy0"><</span>httpProtocol<span class="sy0">></span><br /> <span class="sy0"><</span>customHeaders<span class="sy0">></span><br /> <br /> <span class="sy0"></</span>customHeaders<span class="sy0">></span><br /> <span class="sy0"></</span>httpProtocol<span class="sy0">></span></div></td></tr></tbody></table></div> <p>问题的解决方案</p> <p> 如果Web服务器激活了安全功能，则可能会导致客户端SecurityError。 </p> <hr> <p> 对我来说，我想实现双向握手，意思是：<br /> - 父窗口加载速度比iframe快<br /> - iframe一旦准备就应该与父窗口通话<br /> - 父级已准备好接收iframe消息并重播 </p> <p> 此代码用于使用[CSS自定义属性]在iframe中设置白色标签<br /> 码：<br /> IFRAME </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer">$<span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br /> window.<span class="me1">onload</span> <span class="sy0">=</span> <span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br /> <span class="co1">// create listener</span><br /> <span class="kw1">function</span> receiveMessage<span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span><br /> document.<span class="me1">documentElement</span>.<span class="me1">style</span>.<span class="me1">setProperty</span><span class="br0">(</span><span class="st0">'--header_bg'</span><span class="sy0">,</span> e.<span class="me1">data</span>.<span class="me1">wl</span>.<span class="me1">header_bg</span><span class="br0">)</span><span class="sy0">;</span><br /> document.<span class="me1">documentElement</span>.<span class="me1">style</span>.<span class="me1">setProperty</span><span class="br0">(</span><span class="st0">'--header_text'</span><span class="sy0">,</span> e.<span class="me1">data</span>.<span class="me1">wl</span>.<span class="me1">header_text</span><span class="br0">)</span><span class="sy0">;</span><br /> document.<span class="me1">documentElement</span>.<span class="me1">style</span>.<span class="me1">setProperty</span><span class="br0">(</span><span class="st0">'--button_bg'</span><span class="sy0">,</span> e.<span class="me1">data</span>.<span class="me1">wl</span>.<span class="me1">button_bg</span><span class="br0">)</span><span class="sy0">;</span><br /> <span class="co1">//alert(e.data.data.header_bg);</span><br /> <span class="br0">}</span><br /> window.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">'message'</span><span class="sy0">,</span> receiveMessage<span class="br0">)</span><span class="sy0">;</span><br /> <span class="co1">// call parent</span><br /> parent.<span class="me1">postMessage</span><span class="br0">(</span><span class="st0">"GetWhiteLabel"</span><span class="sy0">,</span><span class="st0">"*"</span><span class="br0">)</span><span class="sy0">;</span><br /> <span class="br0">}</span><br /> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> <p> 亲 </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br /></div></td><td><div class="javascript codecolorer">$<span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br /> <span class="co1">// create listener</span><br /> <span class="kw1">var</span> eventMethod <span class="sy0">=</span> window.<span class="me1">addEventListener</span> <span class="sy0">?</span><span class="st0">"addEventListener"</span> <span class="sy0">:</span><span class="st0">"attachEvent"</span><span class="sy0">;</span><br /> <span class="kw1">var</span> eventer <span class="sy0">=</span> window<span class="br0">[</span>eventMethod<span class="br0">]</span><span class="sy0">;</span><br /> <span class="kw1">var</span> messageEvent <span class="sy0">=</span> eventMethod <span class="sy0">==</span><span class="st0">"attachEvent"</span> <span class="sy0">?</span><span class="st0">"onmessage"</span> <span class="sy0">:</span><span class="st0">"message"</span><span class="sy0">;</span><br /> eventer<span class="br0">(</span>messageEvent<span class="sy0">,</span> <span class="kw1">function</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span><br /> <span class="co1">// replay to child (iframe) </span><br /> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'wrapper-iframe'</span><span class="br0">)</span>.<span class="me1">contentWindow</span>.<span class="me1">postMessage</span><span class="br0">(</span><br /> <span class="br0">{</span><br /> event_id<span class="sy0">:</span> <span class="st0">'white_label_message'</span><span class="sy0">,</span><br /> wl<span class="sy0">:</span> <span class="br0">{</span><br /> header_bg<span class="sy0">:</span> $<span class="br0">(</span><span class="st0">'#Header'</span><span class="br0">)</span>.<span class="me1">css</span><span class="br0">(</span><span class="st0">'background-color'</span><span class="br0">)</span><span class="sy0">,</span><br /> header_text<span class="sy0">:</span> $<span class="br0">(</span><span class="st0">'#Header .HoverMenu a'</span><span class="br0">)</span>.<span class="me1">css</span><span class="br0">(</span><span class="st0">'color'</span><span class="br0">)</span><span class="sy0">,</span><br /> button_bg<span class="sy0">:</span> $<span class="br0">(</span><span class="st0">'#Header .HoverMenu a'</span><span class="br0">)</span>.<span class="me1">css</span><span class="br0">(</span><span class="st0">'background-color'</span><span class="br0">)</span><br /> <span class="br0">}</span><br /> <span class="br0">}</span><span class="sy0">,</span><br /> <span class="st0">'*'</span><br /> <span class="br0">)</span><span class="sy0">;</span><br /> <span class="br0">}</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span><br /> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> <p> 当然，你可以限制起源和文本，这是易于使用的代码<br /> 我发现这个考试很有帮助：<br /> [使用postMessage的跨域消息传递] </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> 我正在处理safari的问题，其中iframe中的文档比父页面执行其JS更晚，这导致消息比iframe正在侦听消息的文档更早发送;这与chrome和firefox完全相反 - 你在ios上的safari中测试了你的代码吗？ btw postMessage第二个参数值为"*"不太安全，你应该总是指定域 </li> <li> 你的第一个代码块是在父代的iframe上，还是在加载到iframe的页面上？ </li> </ul> <p></div> </div></p></div> <hr> <ul> <li> 打开开始菜单 </li> <li> 键入windows + R或打开"运行 </li> <li> 执行以下命令。 </li> </ul> <p> <wyn>chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security</wyn> </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> 适合快速和肮脏的测试！ </li> <li> 对于任何不是快速而肮脏的测试的东西都很可怕......并且已经在接受的答案中解决了。 </li> <li> 即使使用该命令，它也无法正常工作，因为Chrome可以避免以这种方式禁用Web安全性</li> </ul> <p></div> </div></p></div> <p><center> <script src="/c2.js"></script></center></p> <hr></div> <div class="recommend-post mb30"> <ul class="widget-links"></ul> </div> </div> <script src="/ce.js"></script> <div class="clear"></div> <div class="social-main"> <div class="clear"></div> </div> <div class="clear"></div> </div><!-- .entry-content --> </article><!-- #post --> <div class="ad-pc ad-site"> </div> </main><!-- .site-main --> </div><!-- .content-area --> <div id="sidebar" class="widget-area"> <div class="sidebar-roll"></div> <aside id="text-3" class="widget widget_text"> <div class="textwidget"><p><script src="/ce.js"></script></p> </div> <div class="clear"></div></aside> <div class="sidebar-roll"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><p><script src="/auto.js"></script></p> </div> <div class="clear"></div></aside> </div> </div> </div> <div class="clear"></div> </div><!-- .site-content --> <div id="footer" alog-group="log-footer"> <div class="foot"> <div class="ps"> <div class="p p2"> <div class="clear"></div> <div class="site-info"> Copyright © 码农家园 联系：ddyu2x@gmail.com </div> </div> </div> </div> </div> <div class="tools"> <a class="tools_top" title="返回顶部"></a> </div> <script type="text/javascript" src="https://www.codenong.com/wp-content/themes/Nana/js/superfish.js"></script> <script type='text/javascript' src='https://www.codenong.com/wp-includes/js/wp-embed.min.js?ver=4.9.15'></script> </body></html> <!-- Dynamic page generated in 0.177 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2023-06-22 15:20:37 --> <!-- super cache -->