如何通过js获取一个网页中的iframe调用的网页的源代码

简单的做个例子，框架路径可以自己修改，调用像百度等网站时无法读取其中源码，涉及到一些安全问题，所以路径要求是合法的允许访问的路径 <script> function GetFrameInnerHtml(objIFrame) { var iFrameHTML = ""; if (objIFramecontentDocument) { //针对netscape iFrameHTML = objIFramecontentDocumentinnerHTML; } else if (objIFramecontentWindow) { // 针对ie55和ie6 iFrameHTML = objIFramecontentWindowdocumentbodyinnerHTML; } else if (objIFramedocument) { // For IE5 iFrameHTML = objIFramedocumentbodyinnerHTML; } return iFrameHTML; } </script> <iframe id="ifa" src="1html" ></iframe> <input type="button" value="click" onclick="alert(GetFrameInnerHtml(documentgetElementById('ifa')))"/>

JS获取/设置iframe内对象元素、文档的几种方法

1、IE专用(通过frames索引形象定位)：

复制代码 代码如下:

documentframes[i]documentgetElementById('元素的ID');

2、IE专用(通过iframe名称形象定位)：

复制代码 代码如下:

documentframes['iframe的name']documentgetElementById('元素的ID');

以上方法，不仅对iframe适用，对frameset里的frame也同样适用。IE虽然擅于自定标准，但不得不说它很多的设计还是比较体现人性化的。比如这个，它在同样支持下面的标准路径之外，提供了一个简洁且形象化的写法。

3、通用方法：

复制代码 代码如下:

documentgetElementById('iframe的ID')contentWindowdocumentgetElementById('元素的ID')

注意要加上contentWindow，往往出现问题都是因为这个容易被忽略，它代表frame和iframe内部的窗口对象。

JS获取iframe文档内容

复制代码 代码如下:

<script type="text/javascript">

function getIframeContent(){ //获取iframe中文档内容

var doc;

if (documentall){ // IE

doc = documentframes["MyIFrame"]document;

}else{ // 标准

doc = documentgetElementById("MyIFrame")contentDocument;

}

return docbodyinnerHTML;

}

</script>

注意：上面的 contentDocument 相当于 contentWindowdocument ！

一、需求与遇到的问题

在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。

我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPagehtm）中的按钮时，在顶部菜单页面的右侧显示“退出”。

我现在遇到的问题是：如何在页面的一个iframe子页面（mainPagehtm）中获取并且 *** 作其它iframe子页面（比如topPagehtm）中的HTML元素？

二、通过JS获取并 *** 作iframe中的元素来解决问题

这里主要就是通过JS来 *** 作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

经过我在网上查资料，找到了JS *** 作iframe中HTML元素的方法。示例如下。

复制代码 代码如下:

function ShowExit() {

//获取iframe的window对象

var topWin = windowtopdocumentgetElementById("topNav")contentWindow;

//通过获取到的window对象 *** 作HTML元素，这和普通页面一样

topWindocumentgetElementById("exit")stylevisibility = "visible";

}　

说明：第一步，通过windowtopdocumentgetElementById("topNav")方法获取了顶部菜单页面（topPagehtm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来 *** 作iframe框架中的元素，这和 *** 作不在iframe框架中的普通HTML元素是一样的。

先找到iframe对象，再通过iframe的contentDocument属性获取SVG整个文档对象

<iframe src="svg/02svg" frameborder="0" width="500" height="300" id="f1"></iframe>var obj=documentgetElementById("f1");

var d=objcontentDocument;

简单的做个例子，框架路径可以自己修改，调用像百度等网站时无法读取其中源码，涉及到一些安全问题，所以路径要求是合法的允许访问的路径 <script> function GetFrameInnerHtml(objIFrame) { var iFrameHTML = ""; if (objIFramecontentDocument) { //针对netscape iFrameHTML = objIFramecontentDocumentinnerHTML; } else if (objIFramecontentWindow) { // 针对ie55和ie6 iFrameHTML = objIFramecontentWindowdocumentbodyinnerHTML; } else if (objIFramedocument) { // For IE5 iFrameHTML = objIFramedocumentbodyinnerHTML; } return iFrameHTML; } </script> <iframe id="ifa" src="1html" ></iframe> <input type="button" value="click" onclick="alert(GetFrameInnerHtml(documentgetElementById('ifa')))"/>

使用iframe可以截取网站的部分内容，主要配合width、height、overflow等属性来实现的，具体示例如下：

<div style="width:630px;height:350px;overflow:hidden;border:0px">

<div style="width:800px;height:800px;margin:-810px 0px 0px -10px;">

<iframe src="要截取的网址" width="960" height="1280" scrolling="no"></iframe>

</div>

</div>

以上代码中的width 和height分别代表宽度和高度，具体值需要根据具体网页来更改。

方法只有一种：

步骤：

1、获取iframe节点

2、获取iframe中的变量

示例

ahtml

<iframe id='x' name='x' src='bhtml'/>

bhtml

<script>

var y='1';

</script>

在ahtml中获取y，则可以通过以下方式

documentframes['x']y //先获取frame,在获取y

以上就是关于如何通过js获取一个网页中的iframe调用的网页的源代码全部的内容，包括:如何通过js获取一个网页中的iframe调用的网页的源代码、怎么获取iframe里面的元素、如何通过JS获取HTML中iframe中的SVG整个文档等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！