位置: IT常识 - 正文

iframe标签的使用(iframe标签表示的框架)

编辑:rootadmin
iframe标签的使用 iframe标签的使用1、什么是iframe2、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、什么是iframeiframe是HTML元素,用于在网页中内嵌另一个网页。iframe默认有一个宽高,存在边界。iframe是一个行内块级元素,可以通过display修改。所有浏览器都支持 iframe 标签。不过版本支持情况不同。可以把需要的文本放置在 <iframe 和 </iframe 之间,这样就可以应对无法理解 iframe 的浏览器。在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。

推荐整理分享iframe标签的使用(iframe标签表示的框架),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:iframe标签作用,iframe标签表示的框架,iframe标签的src属性,关于iframe标签使用的视频,iframe标签的用法,iframe标签的用法,iframe标签作用,iframe标签的用法,内容如对您有帮助,希望把文章链接给更多的朋友!

iframe标签支持 HTML 中的全局属性:

iframe标签支持 HTML 中的事件属性:如Window 事件属性、Form 事件、Keyboard 事件、Mouse 事件、Media 事件等

2、iframe的元素属性

iframe常用的元素属性:

src:指定内联网页的地址。width、height:控制iframe的宽高。frameborder:iframe默认有个边界,可以设置frameborder为0清除边界。name:框架的名称。scrolling:是否可滚动。yes、no、auto。 3、iframe操作每个iframe里各自维护自己的全局window对象。只有同域才能进行iframe之间的改写,跨域时,只能进行简单的路由跳转。在父级使用window.frames[name]可以获取子iframe的window对象,相应的可以获取document对象,从而对子iframe进行dom操作。在子iframe想要操作父元素的iframe,直接使用子元素的window.parent来获取父级元素的window对象,从而获取document来操作dom。4、iframe 对象及属性

IFrame 对象代表 HTML iframe 元素。

可使用 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);

iframe标签的使用(iframe标签表示的框架)

(6)、获取body:console.log(“body”, idoc.body);

在父级使用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)

在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)。

主域相同而子域不同,可以使用iframe进行解决document.domain = ‘’,指定相同的主域。比如在http://www.example.com/a.html和http://sub.example.com/b.html两个文件中都加上document.domain = “example.com”;

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

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

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

使用注意点: (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事件中。

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自适应iframe默认会自带滚动条,不会全屏。所以要想自适应的话首先去掉滚动条即在iframe标签上添加 scrolling=“no”。<iframe scrolling="no" src="./aaa" id="iframe"></iframe>设置iframe的高为body的高。 var iwindow = iframe.contentWindow; var idoc = iwindow.document; iframe.height = idoc.body.offsetHeight;还可以添加其它的装饰属性。 示例:// 可以直接写在内联里面,也可以在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、服务器端X-Frame-Options

X-Frame-Options是一个相应头,主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8+。有3个选项:X-Frame-Options: DENY。拒绝任何iframe的嵌套请求。X-Frame-Options: SAMEORIGIN。只允许同源请求。例如网页为 lgg.com/123.html,則 lgg.com 底下的所有网页可以嵌入此网页,但是 lgg.com 以外的网页不能嵌入X-Frame-Options: ALLOW-FROM。只允许指定网页的iframe请求,不过兼容性较差Chrome不支持X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。// 等价于X-Frame-Options: DENYif(window != window.top){ window.top.location.href = window.location.href;}// 等价于X-Frame-Options: SAMEORIGINif(top.location.hostname != window.location.hostname) { top.location.href =window.location.href;}该属性是对页面的iframe进行一个主要限制。另外还有一个Content Security Policy,同样也可以对iframe进行限制,而且,他应该是以后网页安全防护的主流。sandbox

sandbox是h5的一个新属性(IE10+支持),就是用来给指定iframe设置一个沙盒模型限制iframe的更多权限。启用方式:添加sandbox属性。<iframe sandbox src="..."></iframe>会对iframe页面进行一系列的限制:script脚本不能执行。不能发送ajax请求。不能使用本地存储,即localStorage,cookie等。不能创建新的弹窗和window。不能发送表单。不能加载额外插件比如flash等。可以在sandbox里面进行一些设置:<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>

7.3、iframe使用场景PDF文档预览。插入广告等。

本文链接地址:https://www.jiuchutong.com/zhishi/299243.html 转载请保留说明!

上一篇:Vue中的MVVM模型(通俗易懂版)(vuemvvm模式)

下一篇:2023 年前端十大 Web 趋势(2021年前端还火吗)

  • 如何另辟蹊径,进行众筹营销(如何另辟蹊径卖保险)

    如何另辟蹊径,进行众筹营销(如何另辟蹊径卖保险)

  • 淘宝网店怎样做好推广优化工作(淘宝网店怎样做推广赚钱)

    淘宝网店怎样做好推广优化工作(淘宝网店怎样做推广赚钱)

  • 长焦镜头作用(长焦)(佳能长焦镜头型号大全)

    长焦镜头作用(长焦)(佳能长焦镜头型号大全)

  • 抖音退货运费险退到哪里(抖音退货运费险在哪里查看)

    抖音退货运费险退到哪里(抖音退货运费险在哪里查看)

  • 网易云音乐私人fm不见了(网易云音乐私人漫游模式)

    网易云音乐私人fm不见了(网易云音乐私人漫游模式)

  • 华为nova5i键盘声音怎么关闭(华为手机键盘声音在哪里调)

    华为nova5i键盘声音怎么关闭(华为手机键盘声音在哪里调)

  • 一加7t pro和一加7 Pro有什么区别(一加7t和一加7t pro哪个好)

    一加7t pro和一加7 Pro有什么区别(一加7t和一加7t pro哪个好)

  • 华为p30pro定时关机怎么办(华为p30pro定时关机)

    华为p30pro定时关机怎么办(华为p30pro定时关机)

  • 天猫漏发货不承认怎么办(天猫店铺漏发货怎么办)

    天猫漏发货不承认怎么办(天猫店铺漏发货怎么办)

  • excel向上取整数的公式(excel小数保留整数的方法)

    excel向上取整数的公式(excel小数保留整数的方法)

  • 小天才手表没电了怎么找到(小天才手表没电了丢了怎么办)

    小天才手表没电了怎么找到(小天才手表没电了丢了怎么办)

  • 华为nova6移动数据怎么切换(nova 移动)

    华为nova6移动数据怎么切换(nova 移动)

  • 一个身份证可以注册几个京东账号(一个身份证可以办几张手机卡)

    一个身份证可以注册几个京东账号(一个身份证可以办几张手机卡)

  • 手机qq屏幕共享能听到视频的声音吗(手机qq屏幕共享怎么共享视频声音)

    手机qq屏幕共享能听到视频的声音吗(手机qq屏幕共享怎么共享视频声音)

  • 微信聊天记录多久自动删除(微信聊天记录多少g怎么看)

    微信聊天记录多久自动删除(微信聊天记录多少g怎么看)

  • 全功能nfc和多功能nfc有什么区别(nfc多功能和全功能的区别)

    全功能nfc和多功能nfc有什么区别(nfc多功能和全功能的区别)

  • 快手关注页面怎么变了(快手关注页面怎么恢复四宫格)

    快手关注页面怎么变了(快手关注页面怎么恢复四宫格)

  • 手机里的照片怎么传到电脑(手机里的照片怎么传到u盘里面)

    手机里的照片怎么传到电脑(手机里的照片怎么传到u盘里面)

  • 红魔手机后面的灯怎么亮(红魔手机后面的灯怎么关)

    红魔手机后面的灯怎么亮(红魔手机后面的灯怎么关)

  • 如何制作简报电子版(如何制作简报电子版视频)

    如何制作简报电子版(如何制作简报电子版视频)

  • 苹果耳机airpods2防水吗(苹果耳机AirPods2续航多久)

    苹果耳机airpods2防水吗(苹果耳机AirPods2续航多久)

  • 鼠标驱动自瞄教程(鼠标驱动自瞄教学)

    鼠标驱动自瞄教程(鼠标驱动自瞄教学)

  • 怎么扩列好友(怎么样扩列微信好友)

    怎么扩列好友(怎么样扩列微信好友)

  • 360手机锁屏广告怎么取消  (360手机锁屏广告怎么关)

    360手机锁屏广告怎么取消  (360手机锁屏广告怎么关)

  • 工控机和电脑的区别(工控机与电脑主机的区别)

    工控机和电脑的区别(工控机与电脑主机的区别)

  • win10屏幕黑屏就剩鼠标(win10屏幕黑屏就剩鼠标调好重启又恢复正常)

    win10屏幕黑屏就剩鼠标(win10屏幕黑屏就剩鼠标调好重启又恢复正常)

  • vue查询数据el-table不更新数据(vue 查询)

    vue查询数据el-table不更新数据(vue 查询)

  • 出租房屋收取水电费 能计收入吗
  • 什么类型的电子商务
  • 劳务报酬支出 怎么做账
  • 企业所得税资产总额怎么计算
  • 一般纳税人销售自己使用过的汽车
  • 累计净值包含业务收入吗
  • 其他应收款可以在贷方吗
  • 增票普票税额是否可以抵扣吗
  • 怎么调开票金额
  • 土地转让的税费怎么算
  • 通信费税前列支的标准和报销票据的要求
  • 参加国外展会费用
  • 冲减增值税销项税额
  • 怎么计提所得税费用
  • 电子普票开具的最新文件
  • 残值收入的会计处理
  • win11前面板耳机没声音
  • vnisedit 打包
  • 车辆拍卖怎么过户
  • pniopcacexe是什么进程
  • 私立医院交所得税吗
  • 投资性房地产减值准备属于什么科目
  • php数组函数题目
  • PHP:pg_convert()的用法_PostgreSQL函数
  • 最贵的域名是什么名字
  • vue的watch监听
  • 企业所得税申报表模板
  • 两借两贷属于复合会计分录吗
  • php公众号开发框架
  • winform 文件上传
  • 移动端适配 px
  • java实现电子发票
  • 凭证摘要写错了已经结账
  • 固定资产清理借方增加还是减少
  • 税务三方协议怎么重签
  • 个人取得的劳务报酬所得,如何缴纳个税
  • 土地出让金抵减增值税账务处理
  • 未分配利润为负数严重吗
  • 汇算清缴如何调报表
  • 首涂24套
  • wordpress运行缓慢
  • java 邮件
  • python中的函数调用
  • 差旅费抵扣所得税标准
  • 新会计准则套期利息计算
  • 小规模纳税人能开专票吗2023
  • 小规模纳税人的认定标准是什么
  • 个税申报属于哪个部门的职责
  • 自行开具增值税专用发票怎么开
  • 企业的哪些支出不得列入成本费用原因
  • 运费在会计科目中属于什么费用
  • 免税收入计入起征点吗
  • 餐饮招待怎么入账
  • Mysql优化sql方案
  • win7怎么操作
  • ubuntu怎么切换桌面
  • service是什么程序
  • linux 命令详解
  • linux ifconfig命令详解
  • win8在哪里卸载软件
  • win8电脑触摸屏没反应怎么办
  • win8系统怎么打开我的电脑
  • win8如何打开任务管理器
  • win7 host文件路径
  • 怎么用代码设置选项
  • win10系统笔记本怎么连接wifi
  • windows自带视频
  • 原生js怎么获取input值
  • 开快打开
  • log4j 日志文件太大
  • 相片管理必备知识
  • linux 环境 mysql写入中文报错
  • js制作网站
  • ubuntu服务器配置代理访问外网
  • python 字典的字典
  • js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
  • 你知道必要的意思吗英文
  • 酒店,旅店的营业范围
  • 个人所得税税单下载
  • 深圳市地方税务局历任局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设