我需要向 iframe 发送一个值。
iframe 存在于当前窗口中。我怎样才能做到这一点？
我需要在包含 iframe 的父窗口中使用 javascript 来完成。
从窗口向 iframe 传递值
IT技术
javascript
html
iframe
2021-01-14 23:27:37
6个回答
首先，您需要了解您有两个文档：框架和容器（其中包含框架）。
从容器操作框架的主要障碍是框架异步加载。您不能随时访问它，您必须知道它何时完成加载。所以你需要一个技巧。通常的解决方案是window.parent在框架中使用“向上”（进入包含iframe标签的文档）。
现在您可以调用容器文档中的任何方法。这种方法可以操作框架（例如调用一些JavaScript代码在你需要的参数框架）。要知道何时调用该方法，您有两种选择：
从框架的 body.onload 调用它。
将脚本元素作为最后一件事放入框架的 HTML 内容中，您可以在其中调用容器的方法（留给读者作为练习）。
所以框架看起来像这样：
<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>
和这样的容器：
<script>
function setUpFrame() {
var frame = window.frames['frame-id'];
frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>
取决于您的具体情况，但如果 iframe 可以在页面的其余部分加载后部署，您可以简单地使用查询字符串，a la：
<iframe src="some_page.html?somedata=5&more=bacon"></iframe>
然后在 some_page.html 中的某处：
<script>
var params = location.href.split('?')[1].split('&');
data = {};
for (x in params)
{
data[params[x].split('=')[0]] = params[x].split('=')[1];
}
</script>
这是另一种解决方案，如果框架来自不同的域，则可用。
var frame = /*the iframe DOM object*/;
frame.contentWindow.postMessage({call:'sendValue', value: /*value*/}, /*frame domain url or '*'*/);
在框架本身中：
window.addEventListener('message', function(event) {
var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
if (origin !== /*the container's domain url*/)
return;
if (typeof event.data == 'object' && event.data.call=='sendValue') {
// Do something with event.data.value;
}
}, false);
不过不知道哪些浏览器支持这个。
使用框架集合。
从链接：
var frames = window.frames; // or // var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) {
// do something with each subframe as frames[i]
frames[i].document.body.style.background = "red";
}
如果 iframe 有名称，您还可以执行以下操作：
window.frames['ponies'].number_of_ponies = 7;
只有当两个页面来自同一个域时，您才能执行此操作。
还有两个选项，它们不是最优雅的，但可能更容易理解和实现，尤其是在 iframe 需要来自其父级的数据只是几个变量，而不是复杂对象的情况下：
使用 URL 片段标识符 (#)
在容器中：
<iframe name="frame-id" src="http://url_to_iframe#dataToFrame"></iframe>
在 iFrame 中：
<script>
var dataFromDocument = location.hash.replace(/#/, "");
alert(dataFromDocument); //alerts "dataToFrame"
</script>
使用 iFrame 的名称
（我不喜欢这个解决方案——它滥用了 name 属性，但它是一个选项，所以我在记录中提到它）
在容器中：
<iframe name="dataToFrame" src="http://url_to_iframe"></iframe>
在 iFrame 中：
<script type="text/javascript">
alert(window.name); // alerts "dataToFrame"
</script>
其它你可能感兴趣的问题