【经验分享】UIBOT“执行JS”命令关于内嵌iframe时如何用JS操作iframe里元素的高级技巧

萌新大白熊 18天前 140

1、如何使用“执行JS”命令来直接操作网页里的iframe里的元素呢(比如新增、删除、修改、点击某个元素)?

关键的秘诀是,需要使用html里iframe元素自带的contentDocument方法,实现外层与内层的贯穿:

比如:

外层的iframe的JS路径是——

document.querySelector("body > div > iframe")

则:

document.querySelector("body > div > iframe").contentDocument 即代表iframe里的整个内容文档。

因此,要选中iframe里的元素,就要在这基础上,再往里写选择器:比如要选中该iframe里的#inner_1_div元素,则如下写即可——

document.querySelector("body > div > iframe").contentDocument.querySelector("#inner_1_div")

_【经验分享】UIBOT“执行JS”命令关于内嵌iframe时如何用JS操作iframe里元素的高级技巧

_【经验分享】UIBOT“执行JS”命令关于内嵌iframe时如何用JS操作iframe里元素的高级技巧

上图里,UIBOT最终的执行JS命令的代码就是:

sRet = WebBrowser.RunJS(hWeb,'''function(){document.querySelector("body> div > iframe").contentDocument.querySelector("#inner_1_div").click();return123}''',True,{"bContinueOnError":False,"iDelayAfter":300,"iDelayBefore":200})


2、如何使用“执行JS”命令来直接操作网页里的iframe里的函数function呢?

关键的秘诀是,需要使用html里iframe元素自带的contentWindow方法,实现外层与内层的贯穿:

_【经验分享】UIBOT“执行JS”命令关于内嵌iframe时如何用JS操作iframe里元素的高级技巧

还是上面的例子网页,要执行iframe里的clickInner函数,只需:

document.querySelector("body > div > iframe").contentWindow.clickInner()

_【经验分享】UIBOT“执行JS”命令关于内嵌iframe时如何用JS操作iframe里元素的高级技巧


总之,内嵌iframe时,主要就是记住3个点:

1、要操作iframe里的元素,则使用:contentDocument

2、要操作iframe里的函数,则使用:contentWindow

3、检查是否跨域,如果跨域,很有可能JS就无法操作内嵌iframe里的元素了!!!

即:如果你操作的网页,内嵌的iframe是其他网站的网页,不是当前网页的网站,则很有可能你无法用JS操作内嵌iframe里的元素!!!(即使你按针对跨域的办法,设置了浏览器允许跨域的配置,但也可能毫无用处!!!运气好还能继续操作,具体原因暂时没弄明白哈哈)


本贴所用的示例网页的HTML源码文件见附件~

上传的附件:
最新回复 (5)
  • 萌新大白熊 18天前
    2
    ^_^ 个人分享,供交流学习~
  • 99网络 17天前
    3

    感谢分享!,我上个月遇到discuz论坛发帖的编辑器,也是内嵌的iframe,无法直接设置元素文本,而使用点击后粘贴的方式就必须要激活浏览器了,无法在后台执行,于是就想用js写入内容。由于自己不会js,当时也研究了老半天才搞定。
    zzz = WebBrowser.RunJS(hWeb,"function (){document.getElementById('e_iframe').contentWindow.document.querySelector('[contenteditable=\"true\"]').innerText='"&neirong&"';return 123}",true,{"bContinueOnError":false,"iDelayAfter":300,"iDelayBefore":200})

  • 萌新大白熊 17天前
    4
    99网络 感谢分享!,我上个月遇到discuz论坛发帖的编辑器,也是内嵌的iframe,无法直接设置元素文本,而使用点击后粘贴的方式就必须要激活浏览器了,无法在后台执行,于是就想用js写入内容。由于自己不会js ...
    不会JS还能研究到这一步,很不错了哇,赞
  • rainvale 17天前
    5
    感谢大佬分享
  • 亿名 14天前
    6
    cy
返回
发新帖