简单使用
我们通常使用iframe最基本的特性,就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转
<iframe src="./iframeA.html"></iframe> 同域
or
<iframe src="https://cn.bing.com/"></iframe> 跨域
iframeA.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height:500px">
<div id="iframeAID">我是iframeA</div>
<input type="text" id="date" value="2022-10-24"/>
</body>
</html>
iframe常用属性
name:框架的名称,window.frames[name]时专用的属性。
src:内框架的地址,可以使页面地址,也可以是图片的地址。
width:框架作为一个普通元素的宽度,建议使用css设置。
height:框架作为一个普通元素的高度,建议在使用css设置。
scrolling:框架的是否滚动。yes,no,auto。
frameborder:是否显示边框,1(yes),0(no)
srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
sandbox: 对iframe进行一些列限制,IE10+支持
获取iframe里的内容
主要的两个API就是contentWindow,和contentDocument,这两个API只是DOM节点提供的方式(即getELement系列对象)
// iframe.contentWindow, 获取iframe的window对象
// iframe.contentDocument, 获取iframe的document对象
<script>
window.onload = function(){
let obj= document.getElementById("iframe1");
// 获取iframe的window对象
let objWindow = obj.contentWindow
console.log(objWindow);
console.log(objWindow.document); // 获取iframe的window对象的document
console.log(objWindow.document.documentElement); // 获取html
console.log(objWindow.document.head); // 获取head
console.log(objWindow.document.body); // 获取body
// 获取iframe的document
let objContentDocument = obj.contentDocument
console.log(objContentDocument);
// 结合Name属性,通过window提供的frames获取.
console.log(window.frames['iframe1'].window);
// 修改子页面样式
let obj= document.getElementById("iframe1");
let box = obj.contentWindow.document.getElementById("iframeAID")
box.style.width = "500px";
box.style.height = "100px";
box.style["backgroundColor"] = "red";
// // 获取子页面输入框值
console.log(window.frames["iframe1"].document.getElementById("date").value);
}
</script>
在iframe中获取父级内容
同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。
在iframe中,可以通过在window上挂载的几个API进行获取.
window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象,即,就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self
<script>
// 方法一: 父页面可控可以使用
window.onload = function(){
console.log(window.frames.name);
console.log(parent.window.frames.document.querySelectorAll("iframe") );
let arr = Array.from(parent.window.frames.document.querySelectorAll("iframe"))
arr.forEach(item => {
if(window.frames.name === item.name) {
console.log(item.id);
console.log(item.width);
console.log(item.height);
console.log(item.src);
}
})
}
// 方法二: 建议使用
window.onload = function(){
parent.window.frames.document.querySelectorAll("iframe").forEach(item => {
if(window.frames.location.href === item.src){
console.log(item.id, '根据地址判断-- 我是iframeA');
}
})
}
</script>
动态添加 iframe
<script>
window.onload = function(){
let iframeCon = document.querySelector('#container')
let text; //传递的信息
let iframe = document.createElement('iframe')
iframe.id = "frame"
iframe.style = "display:block;"
iframe.name="polling"
iframe.src="./iframeB.html"
iframeCon.appendChild(iframe);
}
</script>
iframe样式
默认情况下,iframe会自带滚动条,不会全屏
去掉滚动条
<iframe name="iframe1" id="iframe1" src="./iframeA.html" scrolling="no"></iframe>
设置 iframe的高为body的高
let iframe= document.getElementById("iframe1");
let objWindow = iframe.contentWindow;
let objDoc = objWindow.document;
iframe.height = objDoc.body.offsetHeight;
是否允许iframe设置为透明,allowtransparency 默认为false
<iframe name="iframe1" id="iframe1" src="./iframeA.html" allowtransparency="true"></iframe>
是否允许iframe全屏,allowfullscreen 默认为false
<iframe name="iframe1" id="iframe1" src="./iframeA.html" allowfullscreen="true"></iframe>
iframe安全性探索
iframe出现安全性有两个方面,一个是你的网页被别人iframe,一个是你iframe别人的网页文章来源:https://www.toymoban.com/news/detail-731026.html
防嵌套网页
// 使用window.top来防止自己的网页被iframe.这段代码的主要用途是限定自己的网页不能嵌套在任意网页内
if(window != window.top){
window.top.location.href = correctURL;
}
// 如果你想引用同域的框架的话,可以判断域名
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;
}
在服务器上,对使用iframe的权限进行设置 X-Frame-Options
X-Frame-Options是一个相应头,主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8+有3个选项:
DENY: 当前页面不能被嵌套iframe里,即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套iframe
SAMEORIGIN: iframe页面的地址只能为同源域名下的页面
ALLOW-FROM: 可以在指定的origin url的iframe中加载
X-Frame-Options: DENY 拒绝任何iframe的嵌套请求
X-Frame-Options: SAMEORIGIN 只允许同源请求,例如网页为 foo.com/123.php,則 foo.com 底下的所有网页可以嵌入此网页,但是 foo.com 以外的网页不能嵌入
X-Frame-Options: ALLOW-FROM http://s3131212.com 只允许指定网页的iframe请求,不过兼容性较差Chrome不支持
X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。文章来源地址https://www.toymoban.com/news/detail-731026.html
//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
到了这里,关于iframe 详解、案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!