当前位置：首页 > news >正文

建设监督网站广州seo推广运营专员

news 2025/7/18 16:29:33

建设监督网站,广州seo推广运营专员,福州网站公司,南充能够建设网站的公司有简单使用我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转 <iframe src"./iframeA.html"></iframe> 同域 or <iframe src"https://cn.bing.com/"&g…

简单使用

我们通常使用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.contentWindowconsole.log(objWindow); console.log(objWindow.document); // 获取iframe的window对象的documentconsole.log(objWindow.document.documentElement); // 获取htmlconsole.log(objWindow.document.head); // 获取headconsole.log(objWindow.document.body); // 获取body// 获取iframe的documentlet objContentDocument = obj.contentDocumentconsole.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别人的网页

防嵌套网页

// 使用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的把控交给服务器来进行处理。

//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