位置: 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是什么程序)

  • 个税抵扣申报晚好了需要跟公司申报吗?
  • 税后利润向股东分配股息
  • 公司的股东就是公司的发起人
  • 公司有流水不申报会怎么样
  • 其他应收款怎样做平
  • 租金是含税的吗
  • 员工超过万人公司
  • 个体工商户在哪注销营业执照
  • 核定征收企业股权转让所得税
  • 销售自己使用过的物品
  • 年末结转增值税之后增值税有余额嘛
  • 企业职工遣散费标准
  • 预提土地使用税的分录
  • 划拨土地使用权出租
  • 18年补交17年城建税会计分录
  • 房地产开发企业预收款预缴增值税
  • 店铺不盈利还开吗
  • 建筑业预交的增值税
  • 增值税普通发票和普通发票的区别怎么交税
  • 融资性售后回租和融资租赁的区别
  • 跨年租金收入会计分录
  • 应付利润是会计科目吗
  • 广告服务增值税差额征税
  • 小型微利企业普惠性
  • 个体户怎
  • 当月扣缴社保需要申报吗
  • 事业单位授权支付一体化退库
  • linux deepin怎么样
  • php上传文件参考文件类型
  • php echo \n
  • php tr td
  • 核定征收的企业怎么交所得税
  • 结转损益类收入科目的余额会计分录
  • loaddriver.exe是什么病毒
  • dae是什么文件
  • 直线法摊销的账面价值
  • 运输企业成本核算内容有哪些?
  • php做网页
  • html转xhtml
  • iis制作网页
  • 信托融资放在哪个科目
  • 社保基数和实际工资怎么算
  • js异步解决方案
  • 增值税专用发票和普通发票的区别
  • 餐厅的打包盒一般是多少毫升
  • 企业固定资产账户核算的固定资产其所有权均属于本企业
  • 进销存有什么用
  • 公司法人往公司账户打钱怎么能换回来
  • 劳务派遣和劳务承揽的区别
  • 建设银行e信通介绍
  • 工业企业分为哪几类
  • 进口代理费取费标准
  • 汇算清缴补税的凭证后面需要附件吗
  • 免抵退退税额
  • 企业会计准则2023电子版
  • 会计借方和贷方有哪些科目
  • 使用sql server
  • sql基础问题
  • windows如何创建桌面快捷方式
  • xp系统重启后自动还原怎么办
  • bios中英文对照表图新版
  • win7如何设置搜索包含文件内容
  • windows查询
  • spvic.exe - spvic是什么进程 有什么作用
  • 如何修改apache
  • imscmig.exe
  • win7系统开机进不去
  • Linux中RedHat CentOS Ubuntu Fedora的区别详解
  • python numpy矩阵
  • jquery加载函数
  • vue实现滚动条
  • node .js
  • js打开浏览器新的tab页
  • 图片在线预览html5
  • jQuery.Callbacks()回调函数队列用法详解
  • 税务局副局长分管业务
  • 农商银行股权分红如何计算
  • 常州国家税务局待遇
  • 残疾人买车可以减免购置税吗
  • 进口酒类税收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设