`
xhgrid
  • 浏览: 14438 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS跨域访问操作iframe

阅读更多
很多人一直都有个想法,要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力。

通过Javascript的帮忙我们可以像后台一样动态加载操作iframe对象属性src指向的html页面的内容。这样的操作需要提供两个页面,一个页面是iframe所在页面(页面名称:iPage.html),另一个页面是iframe属性src指向页面(页面名称:srcPage.html)。

iPage.html,<body>里dom:

    <iframe id=“iId“ name=“iName“ src=“srcPage.html“ scrolling=“no“ frameborder=“0“></iframe>

srcPage.html,<body>里dom:

    <h1>妹妹的一天</h1>
    <p>早上吃早点,中午约会吃饭,下午K歌,晚上和哥哥瞎折腾</p>

下面讨论ie下JS是怎么操作以上两个页面,再讨论firefox的做法,最后给出兼容ie,firefox浏览器操作iframe对象的方法。

一、ie下访问操作iframe里内容



大家都知道iframe是非标准html标签,它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话,嘿嘿)

1. ie通过document.frames["IframeName"]获取它,例子:我们在iPage.html里输出srcPage.html里h1的内容,JS如下:

    alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);

你会发现这样在页面里加入代码,好像并没有输出想要的东东,为什么呢?这个我也没有搞清楚,只是习惯性的加入了window.onload就有输出了(注:JS代码都写到这个事件里去),知道的人士可否告诉我下。why?更改之后代码ie下有了输出,firefox下document.frames没有定义错误提示:

    window.onload = (function () {
      alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
    });

2. ie另一种方法contentWindow获取它,代码:

    window.onload = (function () {
     var iObj = document.getElementById(‘iId‘).contentWindow;
     alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
    });

此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过,好事啊!嘿嘿。(网上一查,发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞,有脚本注入攻击的危险。

后来听说可以在后台防止这样的事情发生,算是松了口气。不过还是希望firefox新版本可以解决这样的危险。)

3.改变srcPage.html里h1标题内容,代码:

    iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;

通过contentWindow后访问里面的节点就和以前一样了。
二、firefox下访问操作iframe里内容

Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准,通过标准可以少写一个document,代码:

    var iObj = document.getElementById(‘iId‘).contentDocument;
    alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);
    alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);

兼容这两种浏览器的方法,现在也出来了,就是使用contentWindow这个方法。

嘿嘿!操作iframe是不是可以随心所欲了呢?如果还觉得不爽,你甚至可以重写iframe里的内容。
三、重写iframe里的内容

通过designMode(设置文档为可编辑设计模式)和contentEditable(设置内容为可编辑),你可以重写iframe里的内容。代码:

    var iObj = document.getElementById(‘iId‘).contentWindow;
    iObj.document.designMode = ‘On‘;
    iObj.document.contentEditable = true;
    iObj.document.open();
    iObj.document.writeln(‘<html><head>‘);
    iObj.document.writeln(‘<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);
    iObj.document.writeln(‘</head><body></body></html>‘);
    iObj.document.close();

这两个对象的资料可参考:http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx

firebug测试以上代码性能



注释掉 iObj.document.designMode = ‘On’;

iObj.document.contentEditable = true;



效果没有变,时间效率是注释前的将近三倍。嘿嘿。那两个对象是参考网络一些人的写法,重写iframe里内容,其实没有必要用designMode和contentEditable,除非有其他的需求。
四、iframe自适应高度

有了上面的原理要实现这个相当简单,就是把iframe的height值设置成它里面文档的height值就可以。代码:

    window.onload = (function () {
    var iObj = document.getElementById(‘iId‘);
    iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
    });

现在对JS操作iframe你已经有了全新的认识,说不定那天会因为这个有什么新的web技术名词,嘿嘿,臭美下!

转载:http://www.hbjjrb.com/Jishu/Javascript/200903/154763.html
分享到:
评论

相关推荐

    解决JS跨域访问IFrame的解决方案

    "解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中嵌入的跨域IFrame能够正常通信。下面我们将详细探讨这个问题以及可能的解决方案。 首先,理解同源策略是关键。同源策略是...

    iframe 跨域访问session

    `iframe` 跨域访问`session`正是为了解决这一问题。 首先,让我们了解一下`session`和`cookie`的关系。`session`通常用于存储用户登录状态等临时信息,而`cookie`则作为`session` ID的载体在客户端和服务器之间传递...

    完美解决iframe跨域问题

    3. **iframe跨域问题**:当iframe加载的页面与包含它的页面不在同一个域时,就会出现跨域问题,导致无法直接通过JavaScript进行通信,如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...

    iframe 跨域解决方法

    例如,`util.js`可能包含了`CORS`或`PostMessage`相关的辅助函数,而`xd.js`可能用于`iframe`内部处理跨域消息。 为了实际应用这些方法,我们需要检查`xd.js`中的代码,看看它是如何处理`iframe`的跨域通信的。例如...

    iframe跨域访问示例

    在Web开发中,"iframe跨域访问"是一个重要的概念,涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题,以便更好地理解和应用。 首先,我们需要了解什么是iframe。Iframe,全称Inline Frame,是HTML...

    JS操作iframe里的dom(实例讲解)

    在实际开发中,需要注意跨域问题,因为出于安全考虑,不同源的`iframe`之间不能自由地进行DOM操作和数据交互,除非两个页面都设置了正确的`CORS`策略。此外,`iframe`的加载可能有延迟,因此在操作`iframe`内的元素...

    iframe跨域常用问题和iframe页面自适应

    1. **CORS(Cross-Origin Resource Sharing)**:这是一种现代浏览器支持的跨域资源共享机制,服务器端需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定或所有来源进行跨域访问。例如,服务器端代码...

    js跨域解决方案

    JavaScript跨域是Web开发中一个常见的挑战,由于浏览器的同源策略限制,JavaScript无法直接访问不同源(协议、域名或端口不一致)的资源。本文将深入探讨JS跨域的解决方案,帮助开发者理解并解决这个问题。 首先,...

    iframe跨域调用父窗口js.zip

    但是,通过特定的技术手段,我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先,我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制,它规定只有当两个...

    Javascript跨域访问解决方案

    JavaScript跨域访问解决方案 在Web开发中,JavaScript的同源策略是浏览器为了保障用户安全而实施的一项重要机制。它限制了脚本只能访问与当前页面具有相同协议(如http或https)、主机名和端口号的资源。然而,在...

    跨域控制iframe高度

    然而,由于浏览器的同源策略限制,不同源的iframe(跨域iframe)之间的交互受到严格控制,包括无法直接访问或修改iframe的某些属性,如高度。这在需要动态调整iframe高度以适应内容时会带来挑战。本文将深入探讨如何...

    JS跨域访问解决方案总结

    JavaScript(JS)跨域访问是Web开发中一个常见的挑战,由于浏览器的安全策略,不同源的JavaScript代码不能直接访问或操作彼此的数据。这里的“域”通常指的是协议+域名+端口的组合。当一个网页尝试从不同于其源的URL...

    JS跨域访问解决方案的总结.doc

    JavaScript跨域访问解决方案 在Web开发中,由于同源策略的限制,JavaScript通常只能与同一协议、域名和端口的服务器进行通信。然而,随着Web应用程序的复杂性和交互性增加,跨域请求变得越来越普遍,比如加载外部...

    js操作iframe的一些知识

    这里使用了`getElementById`和`document.all`来访问Iframe内部的元素。需要注意的是,`document.all`是一个非标准的属性,主要用于IE浏览器。 ##### 4. 动态显示或隐藏Iframe中的表格列 有时候我们需要根据用户的...

    iframe与主框架跨域相互访问

    本文将深入探讨`iframe`与主框架如何进行同域和跨域访问,并提供相关的解决方案。 同域访问: 在同域环境下,即`iframe`的源URL与包含它的页面URL具有相同的协议、主机名和端口,`iframe`与主框架之间的通信是无...

    链接修改及跨域访问的问题

    总的来说,跨域访问的实现涉及前端JavaScript代码的修改,如利用IFrame、异步请求和URL构造,同时也需要考虑浏览器的安全策略和可能的服务器端配置。在实际项目中,开发者需要根据具体的需求和环境,选择合适的跨域...

    js调用-嵌入iframe

    综上所述,"js调用-嵌入iframe"涉及到的主要知识点包括IFrame的基本使用、JavaScript与IFrame的交互以及测试中的注意事项。理解并掌握这些内容,对于网页开发尤其是动态内容加载和页面组件的复用具有重要意义。

    解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 &lt;asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....

    javascript跨域访问的方法.pdf

    JavaScript跨域访问是Web开发中的常见挑战,由于浏览器的安全策略——同源策略,JavaScript通常只能访问与当前页面同源(协议、域名、端口都相同)的资源。然而,为了实现不同源之间的通信,开发者可以采取多种方法...

    js iframe跨域访问(同主域/非同主域)分别深入介绍

    iframe跨域访问也被研究的很透了。 一般分两种情况: 一、 是同主域下面,不同子域之间的跨域; 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById(“myframe...

Global site tag (gtag.js) - Google Analytics