JavaScript-跨网域iframe issu

可以说,我有一个名为example.com的站点,在该站点上嵌入了iframe.net域的iframe,现在我想读取iframe的内容并传递一些参数以显示文本消息。 像Hi和用户名一样。

现在的问题是这无法建立两者之间的连接,甚至无法获得我使用以下方法使用的iframe的innerHTML

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

它将引发错误“权限被拒绝访问属性”

有谁知道如何在跨域平台中读写

Kunal Vashist asked 2020-08-10T14:23:56Z
4个解决方案
52 votes

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

如果您可以控制两个站点,则可以使用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('','*');
Rob W answered 2020-08-10T14:24:06Z
4 votes

在Internet Explorer 8中,作为参数传递的事件可能为null,这就是为什么您需要以其他方式访问事件的原因:

在frame.html中:

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

在main.html上:

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

该事件的触发方式与Rob W提出的方式相同:

document.getElementById('frameId').contentWindow.postMessage('message','*');
Przemek Marcinkiewicz answered 2020-08-10T14:24:39Z
0 votes

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;
}
Ahsan Horani answered 2020-08-10T14:25:04Z
0 votes

在React中使用(srcDoc)访问跨域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();
        }
P L DHIMAN answered 2020-08-10T14:25:24Z
translate from https://stackoverflow.com:/questions/9393532/cross-domain-iframe-issue