JS操作iframe

1. 获得iframe的window对象

存在跨域访问限制。

chrome:iframeElement. contentWindow 
firefox: iframeElement.contentWindow 
ie6:iframeElement.contentWindow

文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe’s document object, so you can use the parentWindow property to retrieve the window object.”意思就是一些浏览器可以通过iframeElement.contentDocument.parentWindow获得iframe的window对象。但经过测试firefox、chrome的element.contentDocument对象没有parentWindow属性。

function getIframeWindow(element){
    return  element.contentWindow;
    //return  element.contentWindow || element.contentDocument.parentWindow;
}

2. 获得iframe的document对象

存在跨域访问限制。

chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument
ie:element.contentWindow.document
备注:ie没有iframeElement.contentDocument属性。

var getIframeDocument = function(element) {
    return  element.contentDocument || element.contentWindow.document;
};

3. iframe中获得父页面的window对象

存在跨域访问限制。

父页面:window.parent
顶层页面:window.top
适用于所有浏览器

4. 获得iframe在父页面中的html标签

存在跨域访问限制。

window.frameElement(类型:HTMLElement),适用于所有浏览器

5. iframe的onload事件

非ie浏览器都提供了onload事件。例如下面代码在ie中是不会有弹出框的。

var ifr = document.createElement(‘iframe‘);
ifr.src = ‘http://www.b.com/index.php‘;
ifr.onload = function() {
    alert(‘loaded‘);
};
document.body.appendChild(ifr);

但是ie却又似乎提供了onload事件,下面两种方法都会触发onload

方法一:
<iframe    src="http://www.b.com/index.php"></iframe>

方法二:
//只有ie才支持为createElement传递这样的参数
var ifr = document.createElement(‘<iframe   src="http://www.b.com/index.php"></iframe>‘);
document.body.appendChild(ifr);

由于iframe元素包含于父级页面中,因此以上方法均不存在跨域问题。

实际上IE提供了onload事件,但必须使用attachEvent进行绑定。

var ifr = document.createElement(‘iframe‘);
ifr.src = ‘http://b.a.com/b.php‘;
if (ifr.attachEvent) {
    ifr.attachEvent(‘onload‘,  function(){ alert(‘loaded‘); });
} else {
    ifr.onload  = function() { alert(‘loaded‘); };
}
document.body.appendChild(ifr);

6. frames

window.frames可以取到页面中的帧(iframe、frame等),需要注意的是取到的是window对象,而不是HTMLElement。

var ifr1 = document.getElementById(‘ifr1‘);
var ifr1win = window.frames[0];
ifr1win.frameElement === ifr1;   // true
ifr1win === ifr1;    // false

参考文章

原文地址: http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html

还有一篇操作 iframe 的文章 :  http://blog.163.com/very_apple/blog/static/27759236201092892549494/

时间: 2024-10-15 11:48:43

JS操作iframe的相关文章

JS操作iframe元素

1.  demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html中,js先找到iframe元素(比如命名为:oIframe),那么oIframe.contentWindow就是iframe1.html这个页面的window,剩下了就是DOM操作的事情了. 举例:要求:demo1.html页面中有个按钮,点击按钮,iframe1页面某些文字改变颜色 <!DOCTY

js 操作iframe

// var t = document.getElementById("iframe").contentWindow.document.getElementsByClassName("subFormZoneMenuBar"); // for (var i = 0; i < t.length; i++) { // var tt = t[i]; // console.log(tt); // if(tt.className=="subFormZoneMen

百度地图和js操作iframe

document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv").value = '1'; document.getElementById("ifarme-63").contentWindow.document.getElementById("hfDateStart").value = '20150101'; document.

JS中获取和操作iframe

一.需求与遇到的问题 在网站的后台管理中使用了iframe框架布局,包括顶部菜单.左侧导航和主页面.需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统. 我的思路是:在顶部的菜单页面放一个不可见的“退出”链接,当用户点击位于iframe中的主页面(mainPage.htm)中的按钮时,在顶部菜单页面的右侧显示“退出”. 我现在遇到的问题是:如何在页面的一个iframe子页面(mainPage.htm)中获取并且操作其它iframe子页面(比如topPage.htm

js对iframe内外(父子)页面进行操作

怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象 这两个API只是DOM节点提供的方式(即getELement系列对象) var iframe = do

jquery 操作iframe的几种方法总结

iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text&

jQuery操作iframe子页中元素代码实例

jQuery操作iframe子页中元素代码实例:本章节介绍一下如何在父页面中操作iframe子页面中的元素,希望能够给需要的朋友带来一定的帮助.一.父页面代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <

原生js与iframe一些事

因为sem推广总是提出一些让人吐血的需求,类似于用A链接访问B链接的内容,pc跟无线又要区分不同页面,区域的不同又要显示的内容不同等等,哎呀妈妈喂,净瞎折腾. 这一次的需求是打开A链接,mobile显示B链接的内容,pc显示C链接的内容,因为访问链接不能变.因此我首先想到的就是用iframe了. 本文的前提是iframe同域,即不存在跨域情况,页面没考虑IE兼容 A.html模板大概就是下面酱紫啦: {if $flag eq 'mobile'} <p class="title"

js取iframe内容

js取iframe内容 IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById("s").style.color="blue"; 但是这在Firefox下无效.所以,想到在Firefox下用FireBug来调试.经过调试发现在Firefox下可用以下代码来实现: document.getElementById("MyIFrame").conte