通过 “执行JS脚本“ 指令操作“iframe“内dom元素,支持同域操作

以下为完整代码及代码注释
💡 Tips:建议在本地代码编辑软件编写好之后复制进影刀“执行JS脚本”指令的函数中

const iframe = document.getElementById('my-iframe');  //my-iframe为当前需要操作的iframe的id名
//获取iframe的窗口对象
const iframeWindow = iframe.contentWindow;
// 获取iframe的dom对象
const iframeDocument = iframeWindow.document;
//从iframe中获取一个元素
const element = iframeDocument.getElementById('my-button'); //my-button为当前需要操作的元素id
//接下来就可以通过element对元素节点进行操作啦!


执行JS脚本指令截图


其他小提示
1.本地测试的话需要通过“iframe.onload”等待iframe页面加载完成哦,否则不能获取到iframe内元素节点

const iframe = document.getElementById('my-iframe');
iframe.onload = function () {
  // 写入代码块
}

2.根据不同的标签可以选择不同方法进行获取节点,以下为几个常用方法:

// 适用于元素有唯一的ID标识
const element = document.getElementById('id名');
//获取类名为my-iframe的所有标签列表的第一项
const element = document.getElementsByClassName('class类名')[0]
//返回带有指定标签名的对象集合
const element = document.getElementsByTagName('标签名')

具体操作元素节点方法可通过此链接查看:【前端】JavaScript-操作元素_js 操作元素_钥钥睡着了的博客-CSDN博客

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值