父子页面(iframe)相互获取对方dom元素

现在iframe的使用虽然开始越来越少,但是还是有牵涉到iframe的使用情况,特别是多个iframe互相嵌套,又要进行获取的情况。

现在整理了父子iframe之间互相获取的方式。

(1)父页面获取子页面的方式。

主要通过:

iframe的contentWindow属性,代表iframe所在的window对象。

示例如下:

<script type="text/javascript">
    window.onload = function(){
        var cWindow = document.getElementById(‘iframeId‘).contentWindow;
        var div=cWindow .document.getElementById(‘divId‘);
       //some other operation
    }  

    </script> 

....

<iframe id="iframeId" src="iframe.html" width="100" height="100">
<div id="divId"></div>
</iframe>

(2) 通过子元素获取父元素

主要通过 window.parent 进行获取

示例代码如下:

<div id-"pDivId"></div>
<iframe src="iframe.html" width="100" height="100">

</iframe>

iframe.html页面中的内容为(实现对父元素的操作):

 <script type="text/javascript">
    window.onload = function(){
        var pWindow= window.parent;
        var pDiv=pWindow.document.getElementById(‘pDivId‘);
       //some other operation
    }
    </script>  
时间: 2024-10-26 03:03:32

父子页面(iframe)相互获取对方dom元素的相关文章

框架父子页面iframe相互调用方法

如果你采用嵌入iframe机制不可避免的要用到各个iframe页面之间方法和属性的相互调用.这里介绍的是兼容各个浏览器的iframe调用方式. 这里设定有3个页面一个父页面main.html它嵌入了两个iframe分别是childPage1.html和childPage2.html main.html有一个函数叫parentFunc().main.html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

点击事件然后页面跳转到指定DOM元素的位置

设置一个函数,执行函数滚动条自动拖动,页面跳转到指定DOM元素的位置. 实现方式很简单,首先引入animatescroll.js文件(要先引入JQuery),然后 $('#id').animatescroll(); 即可调到指定DOM元素在页面的位置. 为方便可以编写一个函数,传入DOM元素的ID function jumpTo(id){ $("#"+id).animatescroll(); } 附animatescroll.js /* 使用方法: $("#id")

iframe父子页面之间相互调用元素和函数

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="Keywords" content=""> 6 <meta name="Description" con

Wex5父子页面方法相互调用

父子页面分为两种,1.windowDialog 是弹出的子页面,2.windowContainer 是内嵌的子页面! 在子页面中获取父页面的model对象 this.getParent() 或者 this.getParentModel() 可以获取到父页面的model对象,然后就可以访问父页面任意的方法和属性.直接操作父页面 在父页面中,也可以通过this.comp('windowContainer 或者 windowDialog 的Xid').getInnerModel() 获取子页面的mod

JS获取HTML DOM元素的几种方法

目前我只知道下面这几种获取DOM元素的方法 根据ID获取元素     getElementById 根据标签名获取元素     getElementsByTagName 根据className获取标签列表     getElementsByClassName 根据选择器获取到第一个找到的元素     document.querySelector 根据选择器获取到所有的元素     document.querySelectorAll 还有两个特殊的获取标签方式: 获取html的方法 documen

vue 点击获取当前DOM元素

哈哈哈,昨天登QQ的时候,意外发现有人看了我写的博客,居然还加了我,这就激起了我内心的小波澜啊 公司最近在做电商,用的前端框架依然是VUE 矩MAX(微信公众号)可以搜的到哦,貌似小苹果的AppStore也可以搜的到,不过应该是内测版 回归中体哈,说一下今天做的领券中心 有点类似于京东的领券中心,刚测试完,券全被我领啦 效果就是点击立即领取,文字变为立即使用.弹出领取成功 但是因为接口不是实时的,所以我没有通过接口数据判断让用户点击领取的同时,让优惠券改变状态 但是,毛爷爷说过:办法总比困难多~

使用原生js的scrollTop,刷新进入页面定位到某一个dom元素

原生js的scrollTop即可,与jquery方法的区别是jquery做了兼容封装.我想要实现的功能是时间定位,根据当前时间定位到滚动区的时间位置.页面为移动端页面,上下固定位置,中部为1小时4格的选择区域,从0点到24点. 开始我想发出现了偏差,总想定位到某个dom,这样使得scrollTop一直是0,怎么设置都不行,后来仔细分析才发现要设置在超出当前可视区域的dom上才可以. 所以设置在外层overflow-x:scroll;的dom上即可,根据时间匹配dom位置,根据索引及每格的高度计算

JS获取HTML DOM元素的方法

在JS中获取元素的方法有很多,可以根据实际需要选择合适的方法 一.JS获取元素的方法 1)根据id获取标签元素 var div1=document.getElementById("div1"); 2)根据标签名获取标签列表 var divs=document.getElementsByTagName("div") 3)根据className获取标签列表 var div0=document.getElementsByClassName("div0"

使用jQuery动态调整iframe高度,以及jQuery对dom元素的监听

大家可能会遇到子页面内容较多但iframe高度不够的情况.给iframe设置scrolling="no"的话子页面内容显示不全,不设置又会出现滚动条从而影响美观.当我们点击不同的菜单让iframe加载不同的html文件时,iframe的高度就需要做相应的调整. 主题思路:子页面加载完成后根据具体body的高度给iframe设置一个适合的高度 情况1:各个子页面内容与高度比较固定 <script> $(function(){ $("#Frame_Content&qu