通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。
获取iframe里的内容
主要的两个API就是contentWindow
,和contentDocument
- iframe.contentWindow, 获取iframe的window对象
- iframe.contentDocument, 获取iframe的document对象
这两个API只是DOM节点提供的方式(即getELement系列对象).
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc); //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body
另外更简单的方式是,结合Name属性,通过window提供的frames获取.
<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
console.log(window.frames['ifr1'].window); //window.frames['ifr1']===window
console.dir(document.getElementById("ifr1").contentWindow);
</script>
在iframe中获取父级内容
在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取.
window.parent //获取上一级的window对象,如果还是iframe则是该iframe的window对象。
window.top //获取最顶级容器的window对象,即打开的页面的文档
window.self //返回自身window的引用,
iframe的轮询
在ajax中。上轮询就是在ajax的readyState = 4的时,再次执行原函数即可。
这里使用iframe也是一样,异步创建iframe,然后reload, 后台将返回的信息放在body,然后获取里面信息即可. 这里是直接放在body里.
var iframwCon = document.querySelector('#container'), text; //传递信息
var iframe = document.createElement('iframe'),
iframe.id = "frame",
iframe.style = "display=none;",
iframe.name = "polling",
iframe.src = "target.html";
iframCon.appendChild(iframe);
iframe.onload = function(){
var iloc = iframe.contentWindow.location,
idoc = iframe.contentDocument;
setTimeout(function(){
text = idoc.getElementesByTagName('body')[0].textContext;
console.log(text);
iloc.reload(); //刷新页面,再次获取信息,并且会触发onload函数
},2000);
}
使用reload进行获取来实现长轮询的效果,同时可以添加iframe和删除iframe的方式,进行发送信息。
自适应iframe之广告的插入
自适应iframe
默认情况自带滚动条。不会全屏。
去滚动条:
设置iframe的高为body的高
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
属性 | 效果 |
allowtransparency | true or false 设置为透明是否 |
allowfi=ullscreen | true or false 允许iframe全屏 |
放嵌套网页
伪类防止网站钓鱼,可以使用window.top来防止你的网页被iframe.
//iframe2.html
if(window != window.top){
window.top.location.href = correctURL;
}
这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话,可以判断域名。
if (top.location.host != window.location.host){
top.location.href = window.location.href;
}
当你的网页不同域名的话,上诉就会报错,
所,在使用try…catch…进行错误捕获,如果发生错误,则说明不同域,表明你的页面被盗用,有些浏览器这样写不会报错,需要降级进行处理。
这时候就需要跳转,
try{
top.location.hostname; //检测是否出错
//如果没有出错,则降级处理
if(top.location.hostname != window.location.hostname){
top.location.href = window.location.href;
}
}
catch(e){
top.location.href = window.location.href;
}
这只是在浏览器端进行相关的权限的设置。
X-Frame-Options
X-Frame-Options是一个相应头,主要是描述服务器的网页资源的iframe权限。
DENY: 当前的页面不能被嵌套iframe里,即便是在相同域名的页面中嵌套也是不允许,也不允许网页中的嵌套iframe.
SAMEORIGIN: iframe页面的地址只能为同域名下的页面
ALLOW-FROM: 可以在指定的origin url的iframe中加载。
//js
if(window != window.top){
window.top.location.href = window.location.href;
}
//等价于
X-Frame-Options: DENY
//js
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
//等价于
X-Frame-Options: SAMEORIGIN
另外还有一个Content Secuity Policy
也是可以对iframe进行限制.
CSP 页面保护
都需要在服务器端上设置好相关的Header.CSP的作用,它能极大的防止你的页面被XSS攻击,而且可以指定js,css,img等资源的origin,防止被恶意注入。
使用主要在后端服务器上配置,可以观察response Header:
Content-Security-Policy: default-src ‘self’
默认配置就是同域: defaul-src “self”
和iframe有关系的就是child-src和sandbox.
child-src 就是用来指定iframe的有效加载路径,其实和X-Frame-Options中配置allow-origin是一个道理。不过,allow-origin 没有得到厂商们的支持。
sandbox 和iframe的snadbox属性一样,可以规定来源能够带有什么权限。
sandbox
sandbox就是用来给指定iframe设置一个沙盒模型限制iframe的更多权限。
启动方式就是使用sandbox属性:
这样会对iframe页面进行一系列的限制:
1. script脚本不能执行
2. 不能发送ajax请求
3. 不能使用本地存储,即localStorage,cookie等
4. 不能创建新的弹窗和window
5. 不能发送表单
6. 不能加载额外插件比如flash等
放宽权限:
<iframe sandbox="allow-same-origin" src="..."></iframe>
常用的配置项:
配置 | 效果 |
allow-forms | 允许进行提交表单 |
allow-scripts | 允许执行脚本 |
allow-same-origin | 允许同域请求,ajax,strorage |
allow-top-navigation | 允许iframe能够主导window.top进行页面跳转 |
allow-popups | 允许iframe中弹出新窗口,比如window.open.target=“”——blank“” |
allow-pointer-lock | 在iframe中锁定鼠标 |