首页 技术 正文
技术 2022年11月15日
0 收藏 900 点赞 2,876 浏览 1144 个字

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

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,487
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,486
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,126
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289