iframe操作子页面dom

iframe的Dom操作

我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(iframe)的dom. 我查找了一些资料,简单做了一些整理. 主要分成两个方向来说明: 父级页面操作子页面和子页面操作父级页面. 一.父级页面操作子页面这里面存在一个问题:两个页面不能跨域(小域名也要相同).iframe操作是有跨域限制的,试想以下我的页面的iframe引用了竞争对手的页面,但是我用

Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" > <div class="modal-dialog modal-lg"> &l

主页面获取iframe 的子页面方法。

父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调

使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

<frameset rows="4,200,10,*,120" cols="*" framespacing="0" frameborder="no" border="1" > <frame src=""/> <frame src="<%=practiceInfoSrc %>" id="practice

js-关于iframe:从子页面给父页面的控件赋值方法

项目中我们经会用到iframe,可能还会把iframe里的数值赋值给父页面空间. 接下来我们来说说有关于iframe赋值给父页面的方法. 1.子页面iframe给父页面的控件赋值方法. parent.document.getElementById("user").value = "wwwww"; //子窗口赋值父窗口方法一 parent.document.form1.shoulu.value="123"'; //子窗口赋值父窗口方法二 2.父页面

iframe访问子页面方法

在Iframe中调用子页面的Js函数调用IFRAME子页面的JS函数说明:假设有2个页面,index.html和inner.html.其中index.html中有一个iframe,这个iframe的src指向inner.html. 我们现在要做的就是: 1.在index.html中调用inner.html上的一个js方法 2.在inner.html中调用index.html上的一个js方法实现代码如下: index.html <html> <head> <script

iframe根据子页面自动调整大小

//iframe高度自适应 function IFrameReSize(iframename) { var pTar = document.getElementById(iframename); if (pTar) { //ff if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) { pTar.height = pTar.contentDocument.body.offsetHeight; } //ie e

iframe框架子页面与父页面间的通信

需要注意的问题:页面最好放在服务器上测试避免跨域问题. 具体参考:http://www.cnblogs.com/ljhero/archive/2011/07/09/2101540.html

html中iframe根据子页面内容动态修改高度

JavaScript var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false; var isChrome = br

父页面操作iframe子页面的安全漏洞及跨域限制问题

一.父子交互的跨域限制同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域情况下,就会有限制,无法相互操作. [解决办法] 1.主域不同没招 2.主域相同,子域不同以父(a.baidu.com)子(b.baidu.com)为例: 这俩页面相互操作,要是想解决跨域限制,必须设置一个共同的主域,即document.domain="baidu.com" 二.禁止父

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte

在子页面操作父页面元素和iframe说明

实现功能:在子页面操作父页面元素. 在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们需要在iframe的子页面里对父页面的元素进行操作.下面我就实际代码展示一下. 父级页面 <div id="fatherHtml"> <div id="button1"><h2>这是父级页面</h2></div>

IFrame父页面和子页面的交互

现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面提供了四中方法来操作iframe里面的dom: a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持. 用法: // 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').cont

Js获取iframe子页面全局变量

项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window.frames['iPage'].变量名火狐下:window.frames['iPage'].contentWindow.变量名 IE&火狐下:document.getElementById('iPage').contentWindow.变量名具体原因没有深究,今天在调试一个iframe例子的

js之iframe父、子页面通信

注意事项一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断iframe是否加载完成有两种方法: 1. iframe上用onload事件 2. 用document.readyState=="complete"来判断 <iframe name="myFrame" src="2.html"></ifra

javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

javascript获取iframe框架中,加载的页面document对象因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(iframe) { var Doc; try{ Doc = iframe.contentWindow.document;// For IE5.5 and IE6 }

实现 iframe 子页面调用父页面中的js方法

父页面:index.html(使用iframe包含子页面child.html) [xhtml] view plaincopyprint? <html> <head> <script type="text/javascript">  </script> </head> <body

如何实现跨域获取iframe子页面动态的url

有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可以通过html5 提供的接口 postMessage来过去跨域子页面信息.如下代码: 在localhost:8000服务器下的入口测试页面:http://localhost:8000/index.html <!DOCTYPE html> <html lang="en"&g

iframe子页面无法返回上一页的问题

本文讨论的场景是ipad终端. 如题,因业务需要,需要使用iframe嵌套子页面.让外层始终保持一个socket连接,避免socket每跳转一个页面都要重新关闭建立连接的问题.但是这样问题来了,上线后发现ipad终端无法回退子页面,一回退就退到登录页面了(父页面的上一页).子页面的回退功能没有. 由于用的是谷歌浏览器,网上找了解决方案.其实这个就是浏览器厂商支不支持这个功能的问题.因为PC端的谷歌浏览器调试是支持的,调试ipad模式也是支持的.但是ISO系统的谷歌浏览器没不支持就没办法. 于是I

iframe 框架父页面刷新子页面

1.父页面添加: <script> function testBtn(){ var reshSrc = document.getElementById('myFrame').src; var iframe1=document.getElementById("mainframe"); iframe1.src = reshSrc;//需要给主框架刷新才可以 } </script> <iframe name="mainframe" i

js里父页面与子页面的相互调用

一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName(param1,param2); 2.父页面关闭子页面:在父页面 openWin=window.open(""); function bClick(){ openWin.close(); } 二.在Iframe 的子页面里 1.子页面给父页面的Div赋值 parent.window.doc

iframe操作子页面dom

热门专题