- 浏览: 1013917 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (367)
- JavaScript (23)
- Java (60)
- Python (41)
- 其他 (36)
- SQL (4)
- 开发工具 (26)
- Linux (15)
- AJAX (6)
- Cache (3)
- 正则 (4)
- 架构 (9)
- 手机 (3)
- MySQL (4)
- Android (115)
- vps (1)
- 网站 (4)
- scale (3)
- 搜索引擎 (3)
- iPhone (2)
- hessian (1)
- hessdroid (1)
- 411 (1)
- jstat (1)
- gc (1)
- gallery (1)
- 惯性 (1)
- eclipse (1)
- mac wget error (1)
- miui file explorer 无用 解决办法 (1)
- vim (1)
最新评论
-
qingyezhangluo:
哎。楼主您既然是分享代码的为什么要加密的呢?而且问你密码还不回 ...
android应用换皮肤(转) -
MagicError:
kavoe 写道下载文件有密码。。。。
http抓包工具 -
knightdf:
我先试下再来
JAVA的RAS加密例子 -
kavoe:
下载文件有密码。。。。
http抓包工具 -
changanfounder:
hmc1985 写道setCallbackDuringFlin ...
android gallery滑动惯性问题
很多人一直都有个想法,要是可以随心所欲的操作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技术名词,嘿嘿,臭美下!
参考资料:
https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx
http://www.kuqin.com/webpagedesign/20080516/8536.html
http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
发表评论
-
网站 变灰 兼容各浏览器
2010-08-23 17:28 84<script src="gray ... -
js小技巧
2009-12-10 16:24 1073感谢:http://hi.baidu.com/lundy521 ... -
prototype 1.6
2009-07-08 18:41 872http://www.never-online.net/blo ... -
display:blocK 导致的换行
2009-04-03 19:01 5329#divHeader #divNav #divLogo{mar ... -
jQuery插件---按需加载JavaScript和CSS.
2009-04-02 18:12 4076jQuery插件---按需加载JavaScript和CSS. ... -
JavaScript中的Timer是怎么工作的
2009-03-19 14:35 1493JavaScript中的Timer是怎么 ... -
JS踢掉HTML TAG
2009-02-26 17:31 1051function delHtmlTag(str){ ... -
json 格式化工具
2009-02-20 16:31 2886http://lab.gracecode.com/format ... -
javascript+dom更改html内容总结
2009-02-19 18:01 2395利用JavaScript和dom结合来动态改变HTML内容。1 ... -
IE,firefox内存溢出原因与解决方法
2009-02-18 18:51 4103JavaScript 中的内存泄漏JavaScript 是一种 ... -
网页中嵌入Flash的几种方法(消除IE控件激活虚线)
2009-01-15 15:47 2673Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为 ... -
js压缩
2009-01-13 15:57 1172http://dean.edwards.name/packer ... -
json注意事项
2009-01-11 18:44 13591.JavaScript 用eval 经行转换json数据时。 ... -
Cookie的规范介绍
2009-01-05 16:20 1256Cookie的规范介绍 目前有 ... -
cookie(1)
2009-01-05 16:19 1077我们已经知道,在 document 对象中有一个 cookie ... -
js压缩
2008-12-28 19:26 1308js压缩,既可压缩,又可简单加密 先去这个网站 http:// ... -
郁闷。。。
2008-12-27 16:34 1126搞了大半天,总算弄明 ... -
js飞舞
2008-12-23 15:32 979javascript:R=0; x1=.1; y1=.05; ... -
javascript屏蔽F5刷新键
2008-11-25 13:21 2458<script language="Javas ... -
js 两种继承方法(call prototype)
2008-11-11 14:19 3232<SCRIPT LANGUAGE="JavaS ...
相关推荐
总的来说,JS操作`iframe`里的DOM主要涉及以下几个步骤: 1. 获取`iframe`对象:`document.getElementById('iframeId')` 2. 访问`iframe`的`window`对象:`iframeObject.contentWindow` 3. 访问`iframe`的`document`...
在本篇文章中,我们将深入探讨如何使用JS在iframe内进行DOM操作。 首先,理解iframe的基本概念至关重要。iframe(Inline Frame)是HTML中的一个元素,允许在同一个HTML文档中嵌入另一个HTML文档。这在需要在页面中...
这个函数使用jQuery的方法来访问iframe中的DOM元素。首先,通过“$("#frame_1")”选择器找到id为“frame_1”的iframe元素。然后,通过调用“.contents()”方法获取iframe的文档内容,这会返回iframe的Document对象。...
如果父页面和iframe页面不是同源的,那么在某些浏览器中通过JavaScript访问对方的DOM元素可能会遇到跨域访问控制(CORS)的限制。这时可能需要服务器端的支持,例如设置适当的CORS响应头,或者使用postMessage API...
为了解决这个问题,可以通过JavaScript进行DOM动态操作来实现`iframe`的高度自适应。 #### 关键技术点 1. **DOM操作**:DOM(Document Object Model)是HTML和XML文档的应用程序接口(API)。通过DOM,开发者可以...
### JS未跨域操作iframe里的DOM相关知识点 1. **同源策略** - 同源策略是浏览器的一个安全功能,它限制了不同源文档之间的交互。所谓同源指的是协议、域名、端口完全相同,如果不同源则属于跨域。 - 在没有跨域的...
而`contentDocument`则可以访问iframe内的DOM文档,允许你操作其中的HTML元素。 4. **跨域问题**:需要注意的是,由于同源策略限制,如果iframe加载的页面与包含它的页面不在同一域名下,大部分JavaScript操作会被...
JavaScript可以通过DOM(Document Object Model)来操作IFrame,包括获取IFrame、修改其属性、以及与IFrame内的页面进行通信。 - **获取IFrame**:使用`document.getElementById`或`document.querySelector`等方法...
iframe.document出现拒绝访问。 threw an exception of type 'System.UnauthorizedAccessException' dynamic {System.UnauthorizedAccessException}
在跨域操作iframe时,有时我们需要从父页面访问iframe内部的内容。此时,我们可以结合使用parent.document属性来访问父页面的document对象,再使用find()方法定位到iframe元素,之后可以再次使用contents()方法来...
根据提供的代码片段,“获取父页面iframe中id为name的元素值”,这里涉及到如何通过JavaScript访问`iframe`内的DOM元素: ```javascript // 获取名为"BoardList"的iframe中的元素 parent.frames["BoardList"]....
请注意,由于同源策略的限制,如果iframe加载的页面与父页面不在同一域名下,那么一些跨域安全策略会阻止直接访问iframe的DOM。在这种情况下,可以使用`window.postMessage` API来进行跨域通信。 总结一下,js-...
- JavaScript可以通过DOM(Document Object Model)操作iframe元素。 - 主要通过`window.frames`或者`document.getElementById('iframeId').contentWindow`来访问iframe内的窗口对象。 - 可以通过`window.frames...
本文将详细介绍如何使用JavaScript来获取`iframe`元素,并进行相关的操作,包括在不同浏览器环境下的兼容性处理。 #### 二、IE下访问操作`iframe`内容 在Internet Explorer浏览器中,可以通过多种方式来访问`iframe...
- 子页面访问父页面的DOM,则可以使用`parent`或`top`对象,因为它们分别指向当前iframe的父级框架和顶级窗口。在B.html中访问A.html的DOM,可以写为: ```javascript var parentDoc = parent.document || top....
接下来,我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤: 1. **获取`iframe`元素**:通过`document.getElementById`或`querySelector`方法找到页面上的`iframe`元素...
在JavaScript中,可以使用`iframe.contentDocument`访问iframe的DOM,从而修改其内容,包括添加页眉和页脚元素。例如: ```javascript var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; ...
当iframe加载完成并且其内容高度已知时,可以使用`contentWindow`和`contentDocument`属性来访问iframe的DOM对象,然后通过CSS样式获取高度。例如: ```javascript var iframe = document.getElementById('...
它们可以共享JavaScript变量、通过DOM操作互相影响,以及使用`window.postMessage`进行通信。例如,主框架可以通过以下方式获取`iframe`中的DOM元素: ```javascript var iframeDoc = document.getElementById('...