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里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- [置顶] js操作iframe兼容各种浏览器
在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
- JS操作iframe
1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...
- js操作iframe总结
一 在父页面操作子页面 IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...
- JS操作iframe元素
1. demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...
- js操作iframe框架时应该屡清楚的一些概念
1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...
- js操作Iframe非当前最上层窗体
如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口. <script language="javascript" type="tex ...
- 百度地图和js操作iframe
document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv" ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
随机推荐
- python学习笔记(16)--django的安装
说明: 1. 直接在cmd输入: pip install Django==1.10.6前提是安装了python,pip并添加了环境变量 2. http://www.lfd.uci.edu/~gohlk ...
- 一款纯css3实现的机器人看书动画效果
今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 激活JetBrains的IDE(PhpStorm、WebStorm、IntelliJ IDEA)
JetBrains 授权服务器(License Server URL): http://idea.imsxm.com/ 转自: http://www.imsxm.com/jetbrains-licen ...
- tab标签
<ul class="nav nav-tabs" role="tablist" role="tablist" id="myT ...
- 用 CSS 实现打印显示底色
上一篇有讲到如何在浏览器端实现打印功能.后面发现有个问题,就是表格表头有背景颜色,但是实际打印出来无背景颜色.网上的方法主要有以下几种实现方式: 1.把背景颜色写成行内样式,如下图所示: 但是发现这样 ...
- stos
add <?php /* 添加脚本 参数:u=用户名 v=城市名 为用户添加城市标签 */ header("Content-Type:text/html; charset=utf-8& ...
- 关于Cocos2d-x事件处理机制
事件处理步骤: 1.创建一个触摸事件监听器(单点触摸或多点触摸) 2.实现触摸事件的响应方法 3.添加事件监听器(场景优先或固定值优先) 4.当用户触摸时,事件分发器就会将事件分发给监听器进行响应 首 ...
- 回调方法介绍之中国好室友篇(Java示例)
前言 在Java社区的各种开源工具中,回调方法的使用俯拾即是.所以熟悉回调方法无疑能加速自己对开源轮子的掌握.网上搜了一些文章,奈何对回调方法的介绍大多只停留在什么是回调方法的程度上.本篇文章尝试从回 ...
- Struts2学习笔记(OGNL表达式)
Struts 2支持以下几种表达式语言: OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言: JSTL(JSP Standard T ...
- Maven中央仓库——你可能不知道的细节
地址 —— 目前来说,http://repo1.maven.org/maven2/是真正的Maven中央仓库的地址,该地址内置在Maven的源码中,其它地址包括著名的ibiblio.org,都是镜像. ...