怎么获取iframe里面的元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么获取iframe里面的元素相关的知识,希望对你有一定的参考价值。

JS获取/设置iframe内对象元素、文档的几种方法
1、IE专用(通过frames索引形象定位):
复制代码 代码如下:

document.frames[i].document.getElementById('元素的ID');
2、IE专用(通过iframe名称形象定位):
复制代码 代码如下:

document.frames['iframe的name'].document.getElementById('元素的ID');
以上方法,不仅对iframe适用,对frameset里的frame也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。
3、通用方法:
复制代码 代码如下:

document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表frame和iframe内部的窗口对象。
JS获取iframe文档内容
复制代码 代码如下:

<script type="text/javascript">
function getIframeContent() //获取iframe中文档内容
var doc;
if (document.all) // IE
doc = document.frames["MyIFrame"].document;
else // 标准
doc = document.getElementById("MyIFrame").contentDocument;

return doc.body.innerhtml;

</script>
注意:上面的 .contentDocument 相当于 .contentWindow.document !
一、需求与遇到的问题
  在网站的后台管理中使用了iframe框架布局,包括顶部菜单、左侧导航和主页面。需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统。
  我的思路是:在顶部的菜单页面放一个不可见的“退出”链接,当用户点击位于iframe中的主页面(mainPage.htm)中的按钮时,在顶部菜单页面的右侧显示“退出”。
  我现在遇到的问题是:如何在页面的一个iframe子页面(mainPage.htm)中获取并且操作其它iframe子页面(比如topPage.htm)中的HTML元素?
二、通过JS获取并操作iframe中的元素来解决问题
  这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
  经过我在网上查资料,找到了JS操作iframe中HTML元素的方法。示例如下。
复制代码 代码如下:

function ShowExit()
//获取iframe的window对象
var topWin = window.top.document.getElementById("topNav").contentWindow;
//通过获取到的window对象操作HTML元素,这和普通页面一样
topWin.document.getElementById("exit").style.visibility = "visible";
 
说明:第一步,通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面(topPage.htm)所在的iframe对象;第二步,通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象;第三步,通过上一步获取到的window对象来操作iframe框架中的元素,这和操作不在iframe框架中的普通HTML元素是一样的。
参考技术A 跨域的话是无论如何也取不到的。

没跨域的话这样:
JavaScript code

var iframe = document.getElementById('ifrmae');//获取那个iframe,也可以用$('#iframe')[0]替代
var iframeWindow = iframe.contentWindow;//获取iframe里的window对象
var $c = iframeWindow.$;//获取iframe中的jquery对象
$c('body')//获取iframe中body元素,其他的话自己用$c('#aaa')去获取吧

如果跨了子域,要在父页面跟子页面都设置
document.domain
值都是域名,不要前面的www什么的本回答被提问者采纳

使用JS/JQ获取iframe里面的元素

首先实现父级通过iframe访问子级DOM元素有以下几点需要特别注意的
1,需要在服务器的情况下访问,可以使用本地服务器
2,需要使用入口函数(当初被这个坑惨了)
3,这种方法跨域访问不了
*使用本地服务器

首先建立两个文件分别命名为父级parantN.html和子级Child.html两个html文件,先看看html文件代码。

父级parantN.html

  <iframe id=\'myIframe\' name="myIrame" src="Child.html" 
    scrolling="no" border="0" frameborder="no" framespacing="0"
    allowfullscreen="true">
  </iframe>
</body>

子级Child.html

  <div id="qq">
    <div>
      <div id="text">我是子级</div>
    </div>
    </div>

使用JS代码获取iframe里面的元素

  // 使用JavaScript方法获取
  // 例子:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID")
  window.onload = function () {
    var text = window.frames["myIrame"].document.getElementById("text")
    text.style.color = \'red\';
    text.innerHTML = \'看我使用JavaScript方法获取了iframe里面的元素,并修改了。\';
  }

||||||||
使用JQ获取iframe里面的元素

  //例子: $("#iframe的ID").contents().find("#iframe中的控件ID")
  window.onload = function () {
    $("#myIframe").contents().find("#text").html(\'使用JQ改变了iframe里面的内容\').css({
      \'color\': \'red\'
    })
  }

以上是关于怎么获取iframe里面的元素的主要内容,如果未能解决你的问题,请参考以下文章

javascript 控制 iframe 里面的 a 元素让它不跳出iframe

jquery 获取iframe里面的元素

jquery如何在html页面取得iframe的元素

怎么获取 iframe转跳的网址

如何获取iframe外面的元素

如何获取iframe的父窗口的body标签啊