资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Javascript中怎么对iframe进行操作-创新互联

这篇文章给大家介绍Javascript中怎么对iframe进行操作,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

成都创新互联专注于企业网络营销推广、网站重做改版、萨尔图网站定制设计、自适应品牌网站建设、H5高端网站建设成都商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为萨尔图等各大城市提供网站开发制作服务。
HTML

为了更好的讲解和演示,我们准备3个页面,父级页面index.html的html结构如下。另外两个子页面分别为iframeA.html和iframeB.html。我们需要演示通过父页面获取和设置子页面iframeA.html中元素的值,以及演示通过子页面iframeB.html设置子页面iframeA.html相关元素的值以及操作父页面index.html元素。

--操作结果--

iframeA.html布置一个h2标题,以及一个输入框和一个p段落,结构如下:

xuebuyuan.com

iframe A

xuebuyuan.com欢迎您!

iframeB.html同样布置h2标题和段落以及输入框。iframe有两个按钮,调用了javascript,相关代码等下在js部分会描述。

xuebuyuan.com

iframe B

Helloweb.com

Javascript

页面html都布置好了,现在我们来看Javascript部分。

首先我们来看index.html父级页面的操作。JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器。

我们自定义了函数getIFrameDOM(),传入参数iID即可获取iframe,之后就跟在当前页面获取元素的操作一样了。

function getIFrameDOM(iID){ return document.getElementById(iID).contentWindow.document; }

index.html的三个按钮操作代码如下:

function getValiframeA(){ var valA = getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value; document.getElementById("result").innerHTML = "获取了子窗口iframeA中输入框里的值:"+valA+""; } function setValiframeA(){ getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Helloweba'; document.getElementById("result").innerHTML = "设置了了子窗口iframeA中输入框里的值:Helloweba"; } function setBgiframeA(){ getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc"; }

保存后,打开index.html看下效果,是不是操作很简单了。

好,iframeB.html的两个按钮操作调用了js,代码如下:

function child4child(){ var parentDOM=parent.getIFrameDOM("wIframeA"); parentDOM.getElementById('hello').innerHTML="看到输入框里的值变化了吗?"; parentDOM.getElementById('iframeA_ipt').value = document.getElementById("iframeB_ipt").value; parent.document.getElementById("result").innerHTML="子窗口iframeB操作了子窗口iframeA"; } function child4parent(){ var iframeB_ipt = document.getElementById("iframeB_ipt").value; parent.document.getElementById("result").innerHTML="

子窗口传来输入框值:"+iframeB_ipt+"

"; }

子页面iframeB.html可以通过使用parent.getIFrameDOM()调用了负页面的自定义函数getIFrameDOM(),从而就可以对平级的子页面iframeA.html进行操作,子页面还可以通过使用parent.document操作父级页面元素。

关于Javascript中怎么对iframe进行操作就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网页标题:Javascript中怎么对iframe进行操作-创新互联
文章起源:http://www.cdkjz.cn/article/dosdgh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220