iframe 详解、案例

最新推荐文章于 2024-07-26 20:46:33 发布

前端全栈分享站

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量3.5k

点赞数 1

分类专栏： JavaScript 栏文章标签： javascript html 前端

CSDN-CRJ

本文链接：https://blog.csdn.net/crj453027119/article/details/127513760

版权

JavaScript 栏专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简单使用

我们通常使用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别人的网页

防嵌套网页

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