Javascript 跨域iframe问题

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

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

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

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

---

有人知道如何在跨域平台上读写吗

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

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

// 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('','*');

//framed.htm：
window.onmessage=函数（事件）{
event.source.postMessage（document.body.innerHTML，event.origin）；
};
//主页：
window.onmessage=函数（事件）{
警报（事件数据）；
};
//触发：
// 
document.getElementById（'myframe'）.contentWindow.postMessage（'''.'*'）；

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

在frame.html中：

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

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

在main.html上：

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

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

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

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

---

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

此解决方案的工作原理与iFrame相同。我创建了一个PHP脚本，可以从其他网站获取所有内容，最重要的是，您可以轻松地将自定义jQuery应用于该外部内容。请参考下面的脚本，它可以从其他网站获取所有内容，然后您也可以应用cusom 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;
}

在React with（srcDoc）中访问跨域iframe元素：-


onClickInsideFrame=（）=>{
if（document.getElementById（'iframetnd'）！==null）{
让iframe=document.getElementById（'iframetnd'）；
让innerDocument=（iframe.contentDocument）
？iframe.contentDocument
：iframe.contentWindow.document；
让Obj=innerDocument.getElementsByCassName（“navButtons”）[0]；
如果（对象！==未定义）{
Obj.onclick=（）=>this.func（）；
}
}
}
func=（）=>{
this.setState（{page:2}）
这个.arrangeTest（）；
}
只有在两个站点都有控制权的情况下，才会发生这种情况

你可以用

下面是如何应用它

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



函数测试（）{
document.getElementById（'idMyIframe'）.contentWindow.postMessage（“您的消息在此“，”*”）；
}
是否存在任何反向跨域代理攻击happen@KunalVashist取决于您的应用程序（需要更多详细信息）。还可以看看这个问题。Thx@rob这个问题很好，但如果您使用jquery:
$（window）。我最终无法访问框架内容（'message'，evt=>evt.originalEvent.data//…
您可以使用easyxdm库在跨域之间进行通信。这里有一个链接，请签出。我使用此技术调整iframe的大小（宽度、高度）关于跨域。我不确定这个库是否适用于您的场景。试一试。嗨，穆罕默德，您介意分享一下您是如何做到这一点的吗？如果您还记得的话，请欣赏这几乎是7年前的情景。