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();
}

时间: 2024-10-15 02:56:45

iframe详细的使用的相关文章

window.name的特性是什么?

window.name的特性 window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB). window.name的应用--跨域传输数据 具体实现流程 准备仨页面, a.com/app.html, a.com/proxy.html, b.com/data.html app.html创建<iframe>, src指向b.com/data.html,然后设置iframe的contentWindow.name属性 把<

4款基于html5 canvas充满想象力的重力特效

今天给大家分享4个物理和重力实验,用来展示 html canvas 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那个,我简直不敢相信它是使用html canvas 做出来的.效果图如下: 在线预览   源码下载 主页面代码: <iframe scrolling="no" frameborder="0" width="800px;" height="

组件的详细说明和生命周期ComponentSpecs and Lifecycle

render ReactComponent render() render() 方法是必须的. 当调用的时候,会检测 this.props 和 this.state,返回一个单子级组件.该子级组件可以是虚拟的本地DOM 组件(比如 <div /> 或者 React.DOM.div()),也可以是自定义的复合组件. 你也可以返回 null 或者 false 来表明不需要渲染任何东西.实际上,React渲染一个<noscript> 标签来处理当前的差异检查逻辑.当返回 null 或者 

HTML iframe 和 frameset 的区别

HTML iframe 和 frameset 的区别 iframe 和 frameset 都用于html页面的框架布局. 目录: 1. <iframe> 标签:iframe 是个内联框架,是在页面里生成个内部框架. 2. <frameset> 标签:frameset 定义一个框架集,包含多个子框架,每个框架都有独立的文档. 1. <iframe> 标签 iframe 是个内联框架,是在页面里生成个内部框架. 1.1 格式 <iframe></ifram

virut详细分析

Virut分析 0x00.综合描述 virut样本的执行过程大体可以分为六步:第一步,解密数据代码,并调用解密后的代码:第二步,通过互斥体判断系统环境,解密病毒代码并执行:第三步,创建内存映射文件,执行内存映射文件代码:第四步,遍历进程列表除前4个进程外其他进程全注入代码,挂钩七个函数:第五步,向注入进程创建远程线程(远程线程创建成功不再二次创建),感染hosts文件,感染移动磁盘,修改注册表添加防火墙信任列表,联网受控:第六步,恢复病毒修改的原函数调用,执行原程序功能.完整功能模块图如下: 0

使用 &lt;Iframe&gt;实现跨域通信

什么是iframe iframe就是我们常用的iframe标签:<iframe>.iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容. iframe的用法有很多,接下来说一下iframe的其中一个比较实用的用法----跨域通信 假设现在有两个系统A,B:A系统的某个页面有一部分显示的内容是B系统的,怎么办? <div class="modal-body" id="

frame,iframe,frameset用法和区别

■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <FRAMESET> <FRAME> 即可,而所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档 案而不是其它框窗的档案.<FRAMESET> 是用以划分框窗,每一框窗由一个 <FRAME> 标 记所标示,<FRAME>必须在 <FRAMESET

dojo Provider(script、xhr、iframe)源码解析

总体结构 dojo/request/script.dojo/request/xhr.dojo/request/iframe这三者是dojo提供的provider.dojo将内部的所有provider构建在Deferred基础上形成异步链式模型,utils.deferred函数向3个provider提供统一接口来规范其行为.数据请求在各个provider的发送过程几乎一致: 解析options参数util.parseArgs 创建dfd对象,该对象控制着整个数据接收.处理.传递的过程 //Make

cordova iOS blank iframe iphone iframe 白屏 ios iframe 白屏

(1)解决方案 http://stackoverflow.com/questions/36572537/cordova-ios-blank-iframe/36587026 在 index.html中配置meta <meta http-equiv="Content-Security-Policy" content="default-src *; frame-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; s