Javascript 更改iframe内元素的样式-跨域（我拥有第二个域）

我是2个域名的所有者

   1. www.example1.com 
   2. www.example2.com

我想完成以下两项任务

我想将example2.com中的html页面加载到iframe中。(已完成)

我想更改iframe内容中html中存在的元素的样式 我在这两个页面中都尝试了document.domain，但它不起作用

请注意：我完全控制这两个域

---

请帮帮我，我在这个问题上两天就被绊倒了。

你不应该这样做这是浏览器的一项安全功能，不允许这样的跨域操作。想象一下，如果我可以在我向您展示的任何第三方域内容上运行任何脚本或重新设置列表，我会造成多大的破坏

---

你是否拥有这两个域并不重要，但是你尝试使用的技术是不可能的

如果你拥有这两个域，你可以通过

窗口。postMessage

来实现

在父文档中：

embededIframe.contentWindow.postMessage('changeStyle', 'http://www.example1.com');

handleMessage = function(e) {
  if(e.origin === 'http://www.example1.com') {
    var action = e.data.split(':')[0]
    if(action === 'changeStyle') {
      //do style change
    }
  }
}
window.addEventListener('message', handleMessage, false);

在您的子文档中：

embededIframe.contentWindow.postMessage('changeStyle', 'http://www.example1.com');

handleMessage = function(e) {
  if(e.origin === 'http://www.example1.com') {
    var action = e.data.split(':')[0]
    if(action === 'changeStyle') {
      //do style change
    }
  }
}
window.addEventListener('message', handleMessage, false);

---

可以找到更多信息

您可以使用window.postMessage（）将数据值从父窗口传递到iframe窗口。因此，您可以使用此方法传递css值。 window.postMessage（）的模式详细信息可用

-我尚未尝试。但这可能会有所帮助。