iframe详细的使用
谷歌火狐和ie是有区别的
谷歌需要服务器,为了更安全 获取内容的时候, 正常渲染没问题
获取内容
var oIframe = document.getElementById('iframe');
oIframe.contentWindow 获取到所有的内容节点
注:谷歌下会报错 需要服务器下
oIframe.contentWindow.document.getElementById('div') 获取到页面下的某个id为div的元素
oIframe.contentWindow.document.getElementById('div').style.color='red' 改变他的字体颜色
所有浏览器都支持
操控document
oIframe.contentDocument.getElementById('div') 可以直接获取到document下的元素
注:ie6,7 不支持 。 所以在ie6,7 下需要获取window再操纵Document
另一种情况 就是 三成嵌套
利用最里面的iframe 控制最外层的父级 window.top
例如:
iframe.html
<body>
<iframe src="iframe1.html"></iframe>
</body>
iframe3.html
<body>
aa
<iframe src="iframe.html"></iframe>
</body>
iframe1.html
<body>
<input type="button" value="变红" id="btn" />
</body>
//点击按钮使iframe3的aa变红
var oBtn = document.getElementById('btn');
oBtn.onclick=function(){
window.top.getElementsByTagName('body')[0].style.color="red";
};
onload 事件 oIframe 有 onload 事件
oIframe.onload=function(){ alert(1) } //chrome,ff
oIframe.attachEvent('onload',function(){ alert(1) }) //ie 现在ie不需要事件绑定就可
防止自己的网站被别人利用 被钓鱼 —— 做一下处理
在自己的网站加js
if(window!=window.top){
window.top.location.href = window.location.href;
}
这样在连接自己网站的时候会直接跳到自己的网页
实例:
window.onload=function(){
var oIframe = document.createElement('iframe');
oIframe.src = 'iframe7.html';
document.getElementsByTagName('body')[0].appendChild(oIframe);
function changeHeight(){
setTimeout(function(){
oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
},500);
}
//根据连接文件的高度动态改变iframe的高度
var oBtn = document.getElementById('btn');
oBtn.onclick =function(){
oIframe.src = 'iframe8.html';
changeHeight();
}
var oBtn1 = document.getElementById('btn1');
oBtn1.onclick =function(){
oIframe.src = 'iframe7.html';
changeHeight();
}
changeHeight();
}
iframe详细的使用的更多相关文章
- iframe详细用法
<iframe>是框架的一种形式,也比较常用到. 例子1.<iframe width=420 height=330 frameborder=0 scrolling=auto src= ...
- Iframe的应用以及父窗口和子窗口的相互访问
点评:Iframe和FRAME的区别,方便大家以后在使用过程中根据实际需要取舍.- function getParentIFrameDocument(aID) { var rv = null; // ...
- 4款基于html5 canvas充满想象力的重力特效
今天给大家分享4个物理和重力实验,用来展示 html canvas 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那 ...
- html Frame、Iframe、Frameset 的区别 详细出处参考:http://www.jb51.net/web/22785.html
10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别. 用来划分框架,每一个框架由标记.必须在之内使用,代码如下: 在上面的例子当中,把页面分为左右两个部分, ...
- Iframe 用法的详细讲解
1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解 把iframe解释成“浏览器中的浏览器“很是恰当 & ...
- 使用iframe的好处与坏处详细比拼
一.使用iframe的坏处 1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片.文本.url等内容的,因为该内容不属于该页面,只是访问的时候被临时的调用,而且在SEO建议中也有提到:"f ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
- virut详细分析
Virut分析 0x00.综合描述 virut样本的执行过程大体可以分为六步:第一步,解密数据代码,并调用解密后的代码:第二步,通过互斥体判断系统环境,解密病毒代码并执行:第三步,创建内存映射文件,执 ...
- 两种文件上传的实现-Ajax和form+iframe
前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...
随机推荐
- Intent传递数据的方法
一.传递List 1.传递List<String>的方法 ArrayList<String> info = new ArrayList<String>(); inf ...
- Contains Duplicate III 下标范围<=k 值范围<=t
set妙用 1.维护一个大小最大位k的set set中数据是有顺序的 2.每次新加一个数据,只需要比较该数据加入 有没有带来变化 3.找到 >= 新数据-t的数据对应的迭代器 pos 4.如果找 ...
- 压力测试工具JMeter入门教程
1.Jmeter 概要描叙 jmeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台.多数情况下是用作压力测试,该测试工具在阿里巴巴有着广泛的使用,估计是不要钱吧,哈哈,功能上来说,整个平台 ...
- ftp相关资料
一.ftp状态码 110 重新启动标记应答.在这种情况下文本是确定的,它必须是:MARK yyyy=mmmm,其中yyyy是用户进程数据流标记,mmmm是服务器标记. 120 ...
- location对象说明
在浏览器的console层输入 location 即可输出该对象的相关信息 location.protocol 协议类型 http/https location.hostname 主机名 loc ...
- linux解压/压缩文件
1.*.tar 用 tar –xvf 解压 2.*.gz 用 gzip -d或者gunzip 解压 3.*.tar.gz和*.tgz 用 tar –xzf 解压 4.*.bz2 用 bzip2 ...
- stm32 cubemx hal 工程中 微秒延迟 delay_us
参考的正点原子的代码 测试平台 stm32f429i-disco 配了一个gpio 时钟 gpio /* USER CODE BEGIN 0 */ typedef uint8_t u8; typede ...
- JSON入门教程
尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 ...
- 用CSS制作伪标签云
performance testing stress testing conformance testing acceptane testing smoke testing regression te ...
- 概率论与数理统计讲课PPT和往年期末试卷
讲课PPT 第17课:数理统计的基本概念 注 : 我会陆续把讲课PPT放上去,大家可以下载. 往年试卷及解答 往年期末试卷及解答 注 : 供同学们参考以备考.