修改 iframe 中 div 元素的宽度和高度 - 跨域策略

Posted 2023-05-09

【中文标题】修改 iframe 中 div 元素的宽度和高度 - 跨域策略

【英文标题】：Modifying width and height of a div element inside an iframe - cross domain policy

【发布时间】：2015-10-25 04:19:08

【问题描述】：

我有一个域和一个子域。域在我的控制之下，子域指向一个附属白标网站，即 DNS 指向他们的 IP。我想通过域上的 iframe 加载产品。

我了解由于跨域政策，我无法使用 javascript 更改样式。我想要完成的是修改 iframe 深处的 div 的高度和宽度。

使用 php 简单加载内容不起作用，因为页面编写了大量脚本，如果我这样做，页面的框架会出现，但没有可用的内容。

请指点我一个实用的解决方案？我知道 jquery 足以能够替换，添加样式到同一个域，iframe 或非 iframe 上的东西。但我不知道如何在子域上做到这一点。 我可以控制子域，即我可以将 dns 改回我想要的，但这会阻止白标站点工作。我无法添加任何标题。

【参考方案1】：

如果您可以将自己的 JavaScript 代码放在两个域上，postMessage 函数应该可以帮助您。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

这样的事情应该可以工作：

父母

var iframe = document.getElementById("whatever");
iframe.contentWindow.postMessage("hello");

内嵌框架

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)

    if (event.origin !== "http://your-parent-domain.com") return; // for security

    // do something here with event.data

【讨论】：

正如我所说，子域是白标，子域指向联属计划IP，所以我无法控制上面的内容。