星空软件

 找回密码
 立即注册
搜索

[大佬分享] js获取iframe框架里面的html元素内容,绝对有效

新库软件 | 2021-9-30 10:42:40 | 显示全部楼层 |阅读模式

前言

网上其实关于JS取框架元素的html教程非常多,但是小编翻了很久,发现好用的方法一个都没有,都是废材。我也想不通那些教程到底写了到底有啥作用,我们没办法解决问题。

下面我将会用通俗易懂的方式给大家写教程,实现的方法也是非常简单,就是从一段JS代码里面读取网页内部iframe框架里面的html文本,就这么简单,下面教程开始了

这个教程我也是给大家提前准备了好几天,一直要写,但是总没有一个合适的时间,今天就详细的教一下大家。

操作方法

JS代码分析

下面开始我们的教程,我们就不往深里讲,大家的讲一下,让大家去实现这么一个过程就OK了,没必要讲的非常透彻,不然越看越模糊了。


document.getElementById('框架ID').contentWindow.document.getElementById('框架里面的元素DI')

其实就需要这么一行代码,很短,就能从某个框架里面提取出来htmL元素内容,也是非常非常简单的,通过这段代码,我们就可以进行DIY组合其他形式的功能。

document.getElementById('框架ID')这段代码的意思是获取某个框架的对象,用来操作用。。。

.contentWindow.document.getElementById('框架里面的元素DI')这部分代码就是从框架对象里面获取某个元素的对象,然后我们就可以对元素进行操作了,读取或者写入都可以。

contentDocument 属性

contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。 可以通过所有标准的 DOM 方法来处理被返回的对象。

详细图解教程

下面我们就将以图解的方式教大家操作这段代码,我们先进入谷歌浏览器,然后操作一个带有框架的网页,我这边操作的是QQ空间里面的某个框架,如下图

截图202109301025207266.png
我们现在要操作的就是上图矩形红框所圈的那个框架,进入开发者模式的console栏,在这里我们就可以对网页进行调试代码,如下图

截图202109301027562805.png

通过分析代码我们已经成功定位到了框架位置和框架的ID

截图202109301029366317.png

然后我们进入console调试栏栏输入JS代码'document.getElementById('QM_Feeds_Iframe')' 然后回车执行,就会发现已成功读取出框架里面的源码,看到没

截图202109301040009364.png

然后我们在代码后面,在加一条'.contentWindow.document.getElementById('ifeedsMode')'发现就可以读取出框架下面的某个元素里面的HTML内容,大家学会了吗?

截图202109301041484581.png







上一篇:陌陌会员能无限打招呼吗???已解决
下一篇:【速成实操】抖音最新热门教程,绝对干货~
回复

使用道具 举报

大脚吴妈 | 2021-9-30 10:43:39 | 显示全部楼层
确实可以啊,刚我试了。。。
回复

使用道具 举报

俏蝶吹 | 2021-9-30 10:43:44 | 显示全部楼层
大谢楼主
回复

使用道具 举报

啤酒瓶空了缓 | 2021-9-30 10:43:46 | 显示全部楼层
大谢楼主
回复

使用道具 举报

海上灵光Y8 | 2021-9-30 10:44:22 | 显示全部楼层
这个方法没毛病,我发现直接读取框架源码是失败的,但是读取框架下面的某个元素是没问题的
回复

使用道具 举报

更强 | 2021-9-30 10:44:27 | 显示全部楼层
海上灵光Y8 发表于 2021-9-30 10:44
这个方法没毛病,我发现直接读取框架源码是失败的,但是读取框架下面的某个元素是没问题的 ...

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

全站声明【必看】|小黑屋|新库软件 |网站地图

GMT+8, 2023-12-11 16:29 , Processed in 0.064297 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.