iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的。
但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法。
在网页内操作DOM元素,是使用document对象。那么,当我们需要操作iframe内的元素时,就需要找到iframe内的document对象。
假设有以下HTML代码:
<iframe id="ifm" src="a.htm"></iframe>
var ifm = document.getElementByid('ifm'); var dom = ifm.contentWindow.document;
var txt = dom.getElementById('txt'); txt.value = '123';
也可以像这样移除某个元素:
var txt = dom.getElementByid('txt'); dom.body.removeChild(txt);
操作DOM就是这样了。
那么,如何调用iframe内的javascript方法呢?
javascript定义的方法若要被人访问,那么就应该处于全局状态下,或可以通过全局状态下的某个变量找到。
例如,在iframe引用的a.htm页面内定义这样一个全局方法:
var sayHello = function(){ alert('Hello'); };
这样定义的方法,其实是定义在window对象下的,与下面的写法相等:
window.sayHello = function(){ alert('Hello'); };
那么,如果想要调用这个sayHello方法,就得先找到iframe内网页的window对象。
在上面操作DOM元素的示例中,其实已经找到了iframe元素的window对象,在这行代码里:
var dom = ifm.contentWindow.document;
是的,ifm.contentWindow就是iframe内网页的window对象。
接着,就可以这样调用window对象下的方法了:
ifm.contentWindow.sayHello();
注意:以上介绍的用法只有当iframe内引用的网页与当前网页处于同域下时才有效。若不同域时,以上写法就无能为力了,就会在浏览器的控制台内出现如下异常:Blocked a frame with origin "http://XXX" from accessing a cross-origin frame。
至于当iframe内引用的网页与当前网页不同域时应该如何操作iframe内网页的元素,下次有时间再写。
第一篇博客,就这样吧,练练手。