Question

我是2个域名的所有者

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

我想完成以下两项任务。

我想将example2.com的html页面加载到iframe中。（完成）
我想更改iframe内容中html中存在的元素的样式。

我在两个页面中都尝试过document.domain，但它不起作用。

请注意：我对两个域都拥有完全控制权。

请帮助，我从2天开始就被困在这个问题上。

Answer 1

如果您拥有这两个域，则可以window.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);

可以找到更多信息here

Answer 2

你不应该能够做到这一点。 浏览器的安全功能不允许跨域操作。想象一下，如果我可以运行任何脚本或重新编写我正在向您展示的任何第三方域名内容，我可能会破坏我的破坏。

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

Answer 3

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

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

3 个答案: