xhgrid
- 浏览: 14509 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
很多人一直都有个想法，要是可以随心所欲的操作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
通过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
分享到：
发表评论
-
How to Execute Javascript on Ajax return
2012-10-22 18:35 1123Ajax is a nice technology to de ... -
执行AJAX返回HTML片段中的JavaScript脚本
2012-10-22 18:34 832如果AJAX加载的数据是一 ... -
12种不宜使用的Javascript语法
2012-09-16 21:06 661这几天，我在读《Javascript语言精粹》。 这本书很 ... -
iFrame 跨域高度自适应问题解决
2012-09-16 21:05 895需求是：A页面(例如：www.taobao.com) 要嵌入B ... -
Self-updating scripts
2012-09-12 16:31 829Updates: Philip Tellis deployed ... -
前端相关PPT搜集
2012-09-12 16:23 1049以下为本人搜集的关于前端一些质量比较好的原创PPT，不定期更 ... -
判断浏览器是否支持指定CSS属性和指定值
2012-09-12 16:06 1593现在css3出来了， 添加了许多新特性，但由于并未全部浏览器都 ... -
完美实现溢出文本省略
2012-09-12 16:02 654文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完 ... -
Javascript定义类（class）的三种方法
2012-09-11 09:53 853将近20年前，Javascript诞生的时候，只是一种简单的网 ... -
【NodeCC】NodeJs开发的脚本压缩和combo工具
2012-09-10 23:04 956对于Web前端的开发而言，为了降低文件大小，js文件和css文 ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率
2012-09-10 23:00 971随着WebApp突飞猛进的发 ... -
HTML5中script的async属性异步加载JS
2012-09-10 16:59 1114HTML4.01为script标签定义了5个属性： cha ... -
前端学习资源
2012-09-03 10:15 773前端学习资源 1、http://www.javascrip ... -
一些不能订阅的前端学习资源
2012-09-03 10:14 619一些不能订阅的前端学习资源 1、http://friend ...
相关推荐
"解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制，使得在JSP页面中嵌入的跨域IFrame能够正常通信。下面我们将详细探讨这个问题以及可能的解决方案。 首先，理解同源策略是关键。同源策略是...
`iframe` 跨域访问`session`正是为了解决这一问题。 首先，让我们了解一下`session`和`cookie`的关系。`session`通常用于存储用户登录状态等临时信息，而`cookie`则作为`session` ID的载体在客户端和服务器之间传递...
3. **iframe跨域问题**：当iframe加载的页面与包含它的页面不在同一个域时，就会出现跨域问题，导致无法直接通过JavaScript进行通信，如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...
例如，`util.js`可能包含了`CORS`或`PostMessage`相关的辅助函数，而`xd.js`可能用于`iframe`内部处理跨域消息。 为了实际应用这些方法，我们需要检查`xd.js`中的代码，看看它是如何处理`iframe`的跨域通信的。例如...
在Web开发中，"iframe跨域访问"是一个重要的概念，涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题，以便更好地理解和应用。 首先，我们需要了解什么是iframe。Iframe，全称Inline Frame，是HTML...
在实际开发中，需要注意跨域问题，因为出于安全考虑，不同源的`iframe`之间不能自由地进行DOM操作和数据交互，除非两个页面都设置了正确的`CORS`策略。此外，`iframe`的加载可能有延迟，因此在操作`iframe`内的元素...
1. **CORS（Cross-Origin Resource Sharing）**：这是一种现代浏览器支持的跨域资源共享机制，服务器端需要在响应头中添加`Access-Control-Allow-Origin`字段，允许特定或所有来源进行跨域访问。例如，服务器端代码...
JavaScript跨域是Web开发中一个常见的挑战，由于浏览器的同源策略限制，JavaScript无法直接访问不同源（协议、域名或端口不一致）的资源。本文将深入探讨JS跨域的解决方案，帮助开发者理解并解决这个问题。 首先，...
但是，通过特定的技术手段，我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先，我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制，它规定只有当两个...
JavaScript跨域访问解决方案 在Web开发中，JavaScript的同源策略是浏览器为了保障用户安全而实施的一项重要机制。它限制了脚本只能访问与当前页面具有相同协议（如http或https）、主机名和端口号的资源。然而，在...
然而，由于浏览器的同源策略限制，不同源的iframe（跨域iframe）之间的交互受到严格控制，包括无法直接访问或修改iframe的某些属性，如高度。这在需要动态调整iframe高度以适应内容时会带来挑战。本文将深入探讨如何...
JavaScript（JS）跨域访问是Web开发中一个常见的挑战，由于浏览器的安全策略，不同源的JavaScript代码不能直接访问或操作彼此的数据。这里的“域”通常指的是协议+域名+端口的组合。当一个网页尝试从不同于其源的URL...
JavaScript跨域访问解决方案 在Web开发中，由于同源策略的限制，JavaScript通常只能与同一协议、域名和端口的服务器进行通信。然而，随着Web应用程序的复杂性和交互性增加，跨域请求变得越来越普遍，比如加载外部...
这里使用了`getElementById`和`document.all`来访问Iframe内部的元素。需要注意的是，`document.all`是一个非标准的属性，主要用于IE浏览器。 ##### 4. 动态显示或隐藏Iframe中的表格列 有时候我们需要根据用户的...
本文将深入探讨`iframe`与主框架如何进行同域和跨域访问，并提供相关的解决方案。 同域访问： 在同域环境下，即`iframe`的源URL与包含它的页面URL具有相同的协议、主机名和端口，`iframe`与主框架之间的通信是无...
总的来说，跨域访问的实现涉及前端JavaScript代码的修改，如利用IFrame、异步请求和URL构造，同时也需要考虑浏览器的安全策略和可能的服务器端配置。在实际项目中，开发者需要根据具体的需求和环境，选择合适的跨域...
综上所述，"js调用-嵌入iframe"涉及到的主要知识点包括IFrame的基本使用、JavaScript与IFrame的交互以及测试中的注意事项。理解并掌握这些内容，对于网页开发尤其是动态内容加载和页面组件的复用具有重要意义。
1、为ScriptManager添加脚本引用，不从ScriptResource.axd中加载MicrosoftAjax.js脚本，而是直接加载 <asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....
JavaScript跨域访问是Web开发中的常见挑战，由于浏览器的安全策略——同源策略，JavaScript通常只能访问与当前页面同源（协议、域名、端口都相同）的资源。然而，为了实现不同源之间的通信，开发者可以采取多种方法...
iframe跨域访问也被研究的很透了。 一般分两种情况： 一、 是同主域下面，不同子域之间的跨域； 同主域，不同子域跨域，设置相同的document.domian就可以解决; 父页访问子页，可以document.getElementById(“myframe...