跨域 iframe 问题

Posted 2023-05-09

【中文标题】跨域 iframe 问题

【英文标题】：Cross domain iframe issue

【发布时间】：2012-03-12 16:57:01

【问题描述】：

假设我有一个名为 example.com 的站点，其中 iframe 嵌入了域 iframe.net，现在我想读取 iframe 的内容并传递一些参数来显示文本消息。喜欢用户名的嗨。

现在的问题是这无法在两者之间建立联系，甚至无法获得我使用以下方法的 iframe 的 innerhtml

document.getElementById('myframe').contentWindow.document.body.innerHTML;

它抛出错误“访问属性的权限被拒绝”

有谁知道跨域平台的读写

【问题讨论】：

您可以使用 easyxdm 库在跨域之间进行通信。这是一个链接，请结帐。我曾使用这种技术在跨域上调整 iframe(width, height) 的大小。我不确定这个库是否适用于您的场景。试一试。 easyxdm.net/wp

嗨，Muhammad，您介意分享一下您是如何实现这一目标的吗？如果您还记得的话，那是差不多 7 年前的事了。

【参考方案1】：

如果您无法控制框架站点，则无法规避跨域策略。

如果您对这两个站点都有控制权，则可以使用postMessage 方法跨不同域传输数据。一个非常基本的例子：

// framed.htm:
window.onmessage = function(event) 
    event.source.postMessage(document.body.innerHTML, event.origin);
;

// Main page:
window.onmessage = function(event) 
    alert(event.data);
;

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');

【讨论】：

是否有任何反向跨域代理黑客来实现它

@KunalVashist 取决于您的应用程序（需要更多详细信息）。也看看这个问题Ways to circumvent the same-origin policy。

Thx @rob 这个不错，但最终我无法访问框架内容

如果你使用 jquery：$(window).on('message', evt=>evt.originalEvent.data //...

***.com/a/41566923/2969615

【参考方案2】：

在 Internet Explorer 8 中，作为参数传递的事件可能为 null，这就是您需要以不同方式访问事件的原因：

在 frame.html 中：

window.onmessage = function(event) 
   var evt = event || window.event;
   evt.source.postMessage('Message from iFrame', evt.origin);
;

在 ma​​in.html 上：

window.onmessage = function(event) 
   var evt = event || window.event;
   alert(evt.data);
;

事件的触发方式与 Rob W 所呈现的方式相同：

document.getElementById('frameId').contentWindow.postMessage('message','*');

【参考方案3】：

iFrame 不允许从跨域平台访问内容。只有当您的 iFrame 使用相同的域时，您才能访问。

此解决方案的工作原理与 iFrame 相同。我创建了一个 php 脚本，可以从其他网站获取所有内容，最重要的是您可以轻松地将自定义 jQuery 应用于该外部内容。请参考以下脚本，该脚本可以从其他网站获取所有内容，然后您也可以应用您的自定义 jQuery/JS。此内容可以在任何地方、任何元素或任何页面内使用。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()

  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;

【参考方案4】：

使用 (srcDoc) 在 React 中访问跨域 iframe 元素：-

<iframe srcDoc=this.state.HTML  width='100%' id='iframetnd' onLoad=this.onclickinsideiframe/>


 onclickinsideiframe=()=>
      if(document.getElementById('iframetnd')!==null)

                let iframe = document.getElementById('iframetnd');

                let innerDocument = (iframe.contentDocument)  
                                   ? iframe.contentDocument 
                                   : iframe.contentWindow.document;
                let Obj = innerDocument.getElementsByClassName("navButtons")[0];
                    if(Obj !== undefined)
                        Obj.onclick = ()=>this.func();
          
       
    



  func=()=>
           this.setState(page:2)
           this.arrangeTest();
        

【参考方案5】：

只有在您控制两个网站时才会发生这种情况

你可以使用postMessage

这里是你如何应用它

首先，您可以将以下代码添加到要从中检索数据的站点

 <script>
        function test()        
 document.getElementById('idMyIframe').contentWindow.postMessage("your message here", "*");
        
    </script>
    <iframe id="idMyIframe" onload="test()" src="http://example.otherdomaintosenddatato.com"></iframe>

第二步，您可以将此代码添加到您要向其发送消息或数据的其他域

 window.addEventListener("message", function (message) 
        if (message.origin == "http://firstdomain.com") 
            console.log(message)
        
    );

请注意，您必须在 iframe 的 onload 属性上添加 test() 函数，因为如果该函数在 iframe 加载之前运行，它将变得无用并且不会发送数据