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

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内网页的元素，下次有时间再写。

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

标签：javascript,网页,DOM,元素,window,iframe,ifm,document
来源： https://www.cnblogs.com/mafengzi/p/10462830.html