菜单 搜索
首页 前端知识 iframe标签的使用

iframe标签的使用

2024-04-03 12:04:45 前端知识 前端哥 365 180 我要收藏

iframe标签的使用

  • 1、什么是iframe
  • 2、iframe的元素属性
  • 3、iframe操作
  • 4、iframe 对象及属性
  • 5、创建iframe元素
  • 6、iframe之间的通信
    • 6.1、什么是主域名，什么是子域名(拓展)
    • 6.2、iframe之间的通信
  • 7、其他
    • 7.1、iframe自适应
    • 7.2、防嵌套网页
      • 7.2.1、浏览器端
      • 7.2.2、服务器端
    • 7.3、iframe使用场景

1、什么是iframe

  1. iframe是HTML元素，用于在网页中内嵌另一个网页。
  2. iframe默认有一个宽高，存在边界。
  3. iframe是一个行内块级元素，可以通过display修改。
  4. 所有浏览器都支持 iframe 标签。不过版本支持情况不同。
  5. 可以把需要的文本放置在 <iframe 和 </iframe 之间，这样就可以应对无法理解 iframe 的浏览器。
  6. 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。

    • iframe标签支持 HTML 中的全局属性：
      在这里插入图片描述

    • iframe标签支持 HTML 中的事件属性：如Window 事件属性、Form 事件、Keyboard 事件、Mouse 事件、Media 事件等
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

2、iframe的元素属性

在这里插入图片描述
在这里插入图片描述

iframe常用的元素属性：

  1. src：指定内联网页的地址。
  2. width、height：控制iframe的宽高。
  3. frameborder：iframe默认有个边界，可以设置frameborder为0清除边界。
  4. name：框架的名称。
  5. scrolling：是否可滚动。yes、no、auto。
    在这里插入图片描述

3、iframe操作

  1. 每个iframe里各自维护自己的全局window对象。
  2. 只有同域才能进行iframe之间的改写，跨域时，只能进行简单的路由跳转。
  3. 在父级使用window.frames[name]可以获取子iframe的window对象，相应的可以获取document对象，从而对子iframe进行dom操作。
  4. 在子iframe想要操作父元素的iframe，直接使用子元素的window.parent来获取父级元素的window对象，从而获取document来操作dom。

4、iframe 对象及属性

在这里插入图片描述

  1. IFrame 对象代表 HTML iframe 元素。

  2. 可使用 getElementById() 来访问 iframe 元素。如：
    var iframe = document.getElementById(“iframe”);
    var iwindow = iframe.contentWindow;
    var idoc = iwindow.document;等价于iframe.contentDocument;
    （1）、获取iframe的iframe对象：console.log(“iframe”, iframe);
    在这里插入图片描述
    （2）、获取iframe的window对象：console.log(“window”, iwindow)；
    在这里插入图片描述

    （3）、获取iframe的document：console.log(“document”, idoc);
    在这里插入图片描述
    （4）、获取iframe的html：console.log(“html”, idoc.documentElement);
    在这里插入图片描述

    （5）、获取head：console.log(“head”, idoc.head);
    在这里插入图片描述

    （6）、获取body：console.log(“body”, idoc.body);
    空

  3. 在父级使用window.frames[name]结合iframe的Name属性可以获取子iframe的window对象,相应的可以获取document对象，从而对子iframe进行dom操作（更便捷）。如：
    var iframes = window.frames;
    var iframe = window.frames[‘myFrame’] // 返回的就是window对象

    （1）、console.log(“iframes”, iframes);
    在这里插入图片描述
    （2）、console.log(“iframe”, iframe)，与下面相同。
    在这里插入图片描述

    （3）、获取iframe的window对象：console.log(“iframe”, iframe.window);
    在这里插入图片描述

    （4）、获取iframe的document：console.log(“document”, iframe.document)
    在这里插入图片描述

  4. 在iframe中获取父级内容。
    在同域下，父页面可以获取子iframe的内容，那么子iframe同样也能操作父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取：
    （1）、window.parent //获取上一级的window对象，如果还是iframe则是该iframe的window对象
    （2）、window.top //获取最顶级容器的window对象，即，就是你打开页面的文档
    （3）、window.self //返回自身window的引用。可以理解 window===window.self(脑残)

5、创建iframe元素

可使用 document.createElement() 方法来创建iframe元素：var x = document.createElement(“IFRAME”);
比如，iframe长轮询：

var iframeCon = docuemnt.querySelector('#container'),

text; //传递的信息

var iframe = document.createElement('iframe'),

iframe.id = "frame",

iframe.style = "display:none;",

iframe.name="polling",

iframe.src="target.html";

iframeCon.appendChild(iframe);

iframe.onload= function(){

var iloc = iframe.contentWindow.location,

idoc = iframe.contentDocument;

setTimeout(function(){

text = idoc.getElementsByTagName('body')[0].textContent;
console.log(text);

iloc.reload(); //刷新页面,再次获取信息，并且会触发onload函数
},2000);

}

6、iframe之间的通信

6.1、什么是主域名，什么是子域名(拓展)

  • 主域名又称一级域名或者顶级域名，由域名主体 . 域名后缀组成，整个域名通常只有1个点号。 百度的主域名是baidu.com。
  • 子域名一般会根据站点不同性质在主域名前面加上不同的前缀构成，通常比主域名多一个点或两个点。只要在主域名前面加上前缀的都是该主域名的子域名，子域名又能分为二级子域名、三级子域名、还有多级子域名。
  • 例如：百度的二级域名（子域名）www.baidu.com 如1.www.baidu.com和2.www.baidu.com这样的三级域名也同样可以成为www.baidu.com和baidu.com的子域名。
  • 拓展：子域名爆破就是指探测某个域名下的所有子域名。

6.2、iframe之间的通信

  • iframe就是一个隔离沙盒，相当于我们在一个页面内可以操控很多个标签页一样。
  • 浏览器判断你跨没跨域，主要根据两个点：一个是你网页的协议(protocol)，另一个就是你的host是否相同（window.location.protocol、window.location.host）。

  1. 主域相同而子域不同，可以使用iframe进行解决document.domain = ‘’，指定相同的主域。比如在http://www.example.com/a.html和http://sub.example.com/b.html两个文件中都加上document.domain = “example.com”；
    在这里插入图片描述

  2. 当我们要向指定iframe发送信息时，首先要获取该iframe自己的window对象，然后使用该window对象的postMessage发送消息。

    • window.postMessage(message, targetOrigin, [transfer])

    1. 事件默认参数：
      （1）、e.source – 消息源，消息的发送窗口/iframe。
      （2）、e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源。
      （3）、e.data – 发送过来的数据。

    2. 使用注意点：
      （1）、监听时使用window.addEventListener(“message”,(e)=>{}, false)，必须保证监听的window和发送消息的window相同。
      （2）、需要确定先监听了message事件，再发送的消息。
      （3）、targetOrigin指定了URI的话，必须是相同的域和端口号，不然会报跨域错误。
      （4）、targetOrigin使用*号的话，支持跨域，我们可以通过监听消息的默认参数e.origin来判断是否接收到了正确的消息。
      （5）、当我们明确知道origin是谁时，不要使用星号，当要接受信息时，先判断origin是否是我们要接受的源，再做后续的操作。
      （6）、获取子元素的document时要确保子元素所有dom元素已经挂载完毕，因此在原生的写法时，必须写在window的onload事件中。

    3. iframe通信示例：
      （1）、 窗口1:

<!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>
    <div>窗口1</div>
    <iframe src="http://127.0.0.1:5501/2.html" frameborder="1" id='123' name="abc"></iframe>
    <script>
        window.onload = function () {
            setTimeout(() => {
                window.top.postMessage('handsome', '*')
            }, 0)
        }
    </script>
</body>
</html>

（2）、窗口2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>窗口2</div>
    <script>
        top.addEventListener('message',(e)=>{console.log(e)},false)
    </script>
</body>
</html>

（3）、运行结果：

在这里插入图片描述

7、其他

7.1、iframe自适应

  1. iframe默认会自带滚动条，不会全屏。所以要想自适应的话首先去掉滚动条即在iframe标签上添加 scrolling=“no”。
    <iframe scrolling="no" src="./aaa" id="iframe"></iframe>
  2. 设置iframe的高为body的高。
     var iwindow = iframe.contentWindow;
 var idoc = iwindow.document;
 iframe.height = idoc.body.offsetHeight;
  3. 还可以添加其它的装饰属性。
    在这里插入图片描述
  4. 示例：
    // 可以直接写在内联里面，也可以在css里面定义，不过对于广告iframe来说，样式写在属性中，是最好的。
 <iframe id="frame" name="frame" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>

7.2、防嵌套网页

  • iframe的使用会出现出现安全性，一共两个方面：一个是你的网页被别人iframe，另一个是你iframe别人的网页。
  • 最出名的clickhacking就是使用iframe来 拦截click事件。因为iframe享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。 所以，钓鱼网站就是使用这个技术，通过诱导用户进行点击。

7.2.1、浏览器端

  • 前端可以使用window.top来防止你的网页被iframe。
  • 限定你的网页不能嵌套在任意网页内。如果想要引用同域的框架的话，可以判断域名。
    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;
}

7.2.2、服务器端

  1. X-Frame-Options
    • X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8+。有3个选项：
      1. X-Frame-Options: DENY。拒绝任何iframe的嵌套请求。
      2. X-Frame-Options: SAMEORIGIN。只允许同源请求。例如网页为 lgg.com/123.html，則 lgg.com 底下的所有网页可以嵌入此网页，但是 lgg.com 以外的网页不能嵌入
      3. X-Frame-Options: ALLOW-FROM。只允许指定网页的iframe请求，不过兼容性较差Chrome不支持
    • X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。
    // 等价于X-Frame-Options: DENY
if(window != window.top){
  window.top.location.href = window.location.href;
}
// 等价于X-Frame-Options: SAMEORIGIN
if(top.location.hostname != window.location.hostname) {
  top.location.href =window.location.href;
}
    • 该属性是对页面的iframe进行一个主要限制。另外还有一个Content Security Policy，同样也可以对iframe进行限制，而且，他应该是以后网页安全防护的主流。
  2. sandbox
    • sandbox是h5的一个新属性（IE10+支持），就是用来给指定iframe设置一个沙盒模型限制iframe的更多权限。
    • 启用方式：添加sandbox属性。
    <iframe sandbox src="..."></iframe>
    • 会对iframe页面进行一系列的限制：
      1. script脚本不能执行。
      2. 不能发送ajax请求。
      3. 不能使用本地存储，即localStorage,cookie等。
      4. 不能创建新的弹窗和window。
      5. 不能发送表单。
      6. 不能加载额外插件比如flash等。
    • 可以在sandbox里面进行一些设置：
    <iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>
    在这里插入图片描述

7.3、iframe使用场景

  1. PDF文档预览。
  2. 插入广告等。
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4420.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Python 控制机器狗实现基本动作（前进，后退，向左，向右）

2024-04-20 08:04:44

【Java】SpringMVC参数接收（二）：JSON、URI、文件

2024-04-19 21:04:31

微信开发者工具报错： app.json: 在项目根目录未找到 app.json (env: Windows,mp,1.06.2303220； lib: 2.30.4)

2024-04-19 21:04:10

关于JSONObject和String类型的相互转换

2024-04-19 21:04:10

java解析超大json文件数据

2024-04-19 21:04:10

vscode json文件添加注释报错

2024-04-19 21:04:51

头歌-JavaScript基础

2024-04-19 21:04:54

VScode,右上方三角形的运行和调试消失不见【1.C/C 插件中Intelli Sense Engine与setting.json中的同步问题 2.,右上方三角形的运行和调试被隐藏的问题】

2024-04-19 21:04:46

notepad 安装json格式化插件(Jsonviewer)的两种方式

2024-04-19 21:04:41

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！