位置: IT常识 - 正文

修改iframe内部元素的样式(iframe更改自身src)

编辑:rootadmin
修改iframe内部元素的样式 HTMLIFrameElement.contentDocument

推荐整理分享修改iframe内部元素的样式(iframe更改自身src),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:修改iframe的src,如何在iframe的子页面中改变iframe的页面,如何修改iframe框内的样式,如何在iframe的子页面中改变iframe的页面,css修改iframe里面的样式,修改iframe内容,操作iframe内部元素,修改iframe中的代码,内容如对您有帮助,希望把文章链接给更多的朋友!

使用这个方法获取页面iframe中的dom对象,注意可能会有下面两种结果:

如果iframe和它的父级在同一个域名下,那么这个方法返回document(是一个嵌套的浏览器上下文环境)如果iframe和它的父级不在同一个域名下,那么这个方法返回null

有了上面的这个原则,我们就知道在不跨域的情况下我们能够更容易的修改iframe内部元素的样式,跨域情况则无法获取到iframe内部的元素,只能通过其他方式来达到目的(下面会介绍),首先来看下不跨域是怎样做的。

不跨域修改iframe中元素的样式方式1:直接获取到元素修改let iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;iframeDocument.body.style.backgroundColor = "blue";// This would turn the iframe blue.

通过上面的操作,把iframe中body的背景色修改为“blue”

方式2:在iframe的head中插入样式表// 页面上有一个id为i1的iframe,它嵌入的是同源的文件 child.html<iframe id="i1" src="./child.html" frameborder="0" width="100%" height="400"></iframe>// 借助jQuery在iframe加载后,向其内部插入style.css$('#i1').load(function () { let cssLink = document.createElement("link"); cssLink.href = "style.css"; cssLink.rel = "stylesheet"; cssLink.type = "text/css"; $('#i1') .contents().find("head") .append($('<link rel="stylesheet" type="text/css" href="style.css">') );});// style.cssbody { background-color: aqua;}修改iframe内部元素的样式(iframe更改自身src)

这样我们就修改了iframe中body的背景色。

跨域修改iframe中元素的样式

使用到的方法如下:

Window.postMessage()window.addEventListener(“message”,cb())

父级页面中引入了一个不同域名下的iframe,第一,需要在父级页面发送信息,第二,在iframe页面内监听并处理信息,来间接的修改样式。这是为了保证跨域通信的安全,详细内容参考 这里。

下面介绍具体做法: 父级页面引入了一个跨域的iframe,id为i3

<iframe id="i3" src="./cross.html" onload="load()"></iframe>// 在它加载完成后,执行下面的方法function load() { console.log('loaded') activateTheme("light");}// 这里我们封装了一个activateTheme方法,方便后边复用,作用是修改iframe内部的主题颜色function activateTheme(theme) { var iframe = document.getElementById("i3"); if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage(theme, "*"); }}

当iframe加载完成后,我们向它内部传递了activateTheme(“light”);浅色主题的消息,下面看下它内部如何接收并做出响应:

// cross.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>child</title> <style> body, body.theme-light { background-color: #ededed; padding: 1rem; } body.theme-dark { background-color: #444; color: #fff; } </style></head><body> <script> window.addEventListener("message", function (event) { if (event.origin === window.location.origin) { console.log(event.data) document.body.classList = [] document.body.classList.add(`theme-${event.data}`) } }, false ); </script></body></html>

可以看出,我们在接收到父级传来的消息,根据消息的内容来修改了cross.html body的背景色。并且在这里我们可以做一下是否同源的安全校验。

到这里我们可以得出一个结论:如果你嵌入的iframe页面和父级不是同一域下,而且当你可以在iframe页面中监听事件,这样你才能修改它内部的样式,否则无法修改。

文章首发于 IICOOM-个人博客|技术博客 《修改iframe内部元素的样式》

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

上一篇:js实现web页面扫描二维码(html5-qrcode)(html 调用扫码)

下一篇:PcCtlCom.exe是什么进程 PcCtlCom进程查询(ccmexec.exe是什么程序)

  • 电子商务网店的建设策划(电子商务网店的类型有哪些)

    电子商务网店的建设策划(电子商务网店的类型有哪些)

  • 苹果13支持多少w快充(苹果13支持多少瓦无线快充)

    苹果13支持多少w快充(苹果13支持多少瓦无线快充)

  • 华为nova3e能连拍吗(华为nova3怎么连拍)

    华为nova3e能连拍吗(华为nova3怎么连拍)

  • 支付宝怎么给座机充话费(支付宝怎么给座机充费)

    支付宝怎么给座机充话费(支付宝怎么给座机充费)

  • 企业微信未处理什么意思(企业微信显示未处理)

    企业微信未处理什么意思(企业微信显示未处理)

  • 腾讯会员包季是多少天(腾讯会员包月包季包年哪个好)

    腾讯会员包季是多少天(腾讯会员包月包季包年哪个好)

  • 华为单声道音频要开吗(华为单声道音频怎么关闭)

    华为单声道音频要开吗(华为单声道音频怎么关闭)

  • 苹果11怎么喊siri(苹果11怎么喊sisr清理灰尘)

    苹果11怎么喊siri(苹果11怎么喊sisr清理灰尘)

  • 华为mate30快充设置(华为mate30快充怎么设置)

    华为mate30快充设置(华为mate30快充怎么设置)

  • 支付宝买票怎么取票(支付宝买票怎么看检票口)

    支付宝买票怎么取票(支付宝买票怎么看检票口)

  • 金山pdf是干什么的(金山pdf优缺点)

    金山pdf是干什么的(金山pdf优缺点)

  • 华为怎样分屏使用(华为咋弄分屏)

    华为怎样分屏使用(华为咋弄分屏)

  • 手机语音信箱怎么用(手机语音信箱怎么听?)

    手机语音信箱怎么用(手机语音信箱怎么听?)

  • ios13怎么去掉dock栏(ios13去掉底部dock横条)

    ios13怎么去掉dock栏(ios13去掉底部dock横条)

  • word下划线长度不变(word下划线长度怎么设置)

    word下划线长度不变(word下划线长度怎么设置)

  • 菜鸟裹裹关联是双方能看到吗(菜鸟裹裹关联是相互的吗)

    菜鸟裹裹关联是双方能看到吗(菜鸟裹裹关联是相互的吗)

  • 华为mate30有3.5耳机孔吗(华为mate30有3.5毫米耳机孔吗)

    华为mate30有3.5耳机孔吗(华为mate30有3.5毫米耳机孔吗)

  • 华为mate305g和4g的区别(华为mate305g和4g大小一样吗)

    华为mate305g和4g的区别(华为mate305g和4g大小一样吗)

  • 快手粉丝删了怎么找回(快手粉丝删除后对方能看见吗)

    快手粉丝删了怎么找回(快手粉丝删除后对方能看见吗)

  • 微信投票失败5怎么解决(微信投票失败5是什么原因)

    微信投票失败5怎么解决(微信投票失败5是什么原因)

  • 怎么注册脸书(怎么注册脸书邮箱)

    怎么注册脸书(怎么注册脸书邮箱)

  • 苹果没有备份能恢复吗(苹果手机没有备份影响使用吗)

    苹果没有备份能恢复吗(苹果手机没有备份影响使用吗)

  • 华为p30pro尺寸(华为p30pro尺寸长宽高)

    华为p30pro尺寸(华为p30pro尺寸长宽高)

  • qq自动回复满了怎么删除(qq自动回复有上限吗)

    qq自动回复满了怎么删除(qq自动回复有上限吗)

  • python中shell如何逐行输入?(python的shell怎么运行文件)

    python中shell如何逐行输入?(python的shell怎么运行文件)

  • 一般纳税人的税种有哪些
  • 补缴以前年度附加税
  • 建筑业差额纳税怎么算
  • 管理费里面可以取现金吗
  • 开具红字信息表后怎么开负数发票
  • 法人投入投资款
  • 制造业主要生产工艺
  • 支付劳务报酬怎么做账
  • 个体户进货需要发票吗?
  • 适用简易计税方法的口诀
  • 预警期内的应收账款管理
  • 企业为什么要缴纳增值税
  • 企业进项税和销项税抵扣政策
  • 进口货物的关税税率
  • 数量和单价的乘积
  • 个人所得税的征收
  • 企业收到财政专项资金账务处理
  • 实收资本怎样入账
  • 收购免税农产品的税率
  • 第三方支付销售
  • 第三方开发是什么意思
  • dev beta 发布预览
  • 路由器晚上关了,早上再开信号会好吗?
  • 促销费可以进项抵扣吗
  • 长期应收款在哪一章
  • 固定资产一次性加速折旧
  • 约克大教堂是基督教吗
  • 蔚蓝色的海王星是什么歌
  • php静态页面生成
  • 境外支付佣金代扣代缴增值税
  • 劳务报酬已扣税是否需报个税
  • 待摊费用和预付账款的区别是什么
  • php json格式化
  • vue事件bus
  • openfoam中文教程
  • php 方法
  • 外汇核销是什么意思
  • reactjs.org
  • 金蝶固定资产累计折旧凭证生成
  • 房地产公司测绘费怎么做会计分录
  • mysql两张表差异数据
  • 公司收到注册资本金需要做哪些呢
  • 采用汇兑的方式归还前欠货款
  • 营改增之后建筑业预收账款是否需要预交税款
  • 外购的商品用于生产经营
  • 中级会计报名必须用电脑吗
  • 销售折扣可以开红字专票吗
  • 保险公司代扣的车船使用税分录
  • 预提成本和冲回成本金额不一致情况说明
  • 质量不合格怎么说
  • 购买展示样品是指什么
  • 农产品收购单怎么做会计分录
  • 免税发票怎么抵扣
  • 营业外支出为负数原因
  • 多余备用金记账会计分录
  • 一般纳税人的发票抵扣有效期多久
  • 购买金税盘取得的发票
  • 发出计价是什么意思
  • 账户记录试算不平衡说明记账肯定有差错对吗
  • MySQL利用不同的流程语句输出1到200的和
  • mysql newid()
  • windows 文件名太长无法删除
  • macbook macos
  • centos怎么看硬盘
  • 如何使用U盘装机
  • win7旗舰系统
  • win7怎么打开程序
  • win10启动很慢怎么办
  • WIN10系统优化精简工具
  • perl脚本foreach
  • vue中父子组件如何通信的
  • 详解js的异步编码
  • Android Fragment学习笔记(2) ----使用ListFragment显示列表(上)
  • linux ssh 安装
  • 资源加载中是什么原因
  • 基于JavaScript的网页代码
  • easyui formatter
  • java dom解析
  • 政府免费
  • 农业企业制造费用包括哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设