pra*_*pal 51 html javascript iframe
我需要向iframe发送一个值.
iframe存在于当前窗口中.我怎样才能做到这一点？
我需要在包含iframe的父窗口中使用javascript.
Aar*_*lla 66
首先,您需要了解您有两个文档:框架和容器(包含框架).
从容器操纵框架的主要障碍是框架异步加载.您不能随时访问它,您必须知道它何时完成加载.所以你需要一个技巧.通常的解决方案是window.parent在框架中使用"向上"(进入包含iframe标签的文档).
现在,您可以调用容器文档中的任何方法.这种方法可以操作框架(例如调用一些JavaScript代码在你需要的参数框架).要知道何时调用该方法,您有两种选择:
从frame.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>
Hex*_*ory 56
取决于您的具体情况,但如果在页面的其余部分加载后可以部署iframe ,您只需使用查询字符串,即:
<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>
Bla*_*tha 35
这是另一种解决方案,如果帧来自不同的域,则可以使用.
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);
但是,不知道哪些浏览器支持此功能.
wom*_*ton 16
使用frames集合.
从链接:
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;
只有在同一个域中提供两个页面时,才能执行此操作.
Haj*_*aji 12
还有两个选项,它们不是最优雅但可能更容易理解和实现,特别是在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>
我们可以使用“postMessage”概念从主窗口向底层 iframe 发送数据。
您可以使用此链接查看有关 postMessage 的更多信息， 在主窗口页面中添加以下代码
// main window code
window.frames['myFrame'].contentWindow.postMessage("Hello World!");
我们将通过“Hello World！” 将消息发送到 iframe id="myFrame" 的 iframe contentWindow。
现在在 iframe 源代码中添加以下代码
// iframe document code
function receive(event) {
console.log("Received Message : " + event.data);
}
window.addEventListener('message', receive);
在 iframe 网页中，我们将附加一个事件侦听器来接收事件，在“接收”回调中，我们将把数据打印到控制台
看一下下面的链接，它表明可以使用 Javascript 更改页面内 iFrame 的内容，尽管您很可能会遇到一些跨浏览器问题。如果您可以执行此操作，则可以在页面中使用 javascript 将隐藏的 dom 元素添加到包含您的值的 iFrame，iFrame 可以读取这些值。 访问 iFrame 内的文档
| 归档时间： |
|
| 查看次数： |
96368 次 |
| 最近记录： |