笔记:javascript操作iframe内的DOM元素,及调用iframe内的方法

时间:2022-07-07 14:37:48

iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的。

但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法。

在网页内操作DOM元素,是使用document对象。那么,当我们需要操作iframe内的元素时,就需要找到iframe内的document对象。

假设有以下HTML代码:

<iframe id="ifm" src="a.htm"></iframe>
 
那么可以像这样取得iframe的document对象:
var ifm = document.getElementByid('ifm');
var dom = ifm.contentWindow.document;
 
取得了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内网页的元素,下次有时间再写。

第一篇博客,就这样吧,练练手。