三水清iframe

iframe自适用高度代码

三水清 — Sat, 15 Jan 2011 02:02:48 +0000

有不少wBox的用户反映iframe时候不可以自动撑开高度，今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码，感觉不错，转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

HTML代码如下所示：

使用代码：

window.onload = function(){
     adjustIframe("js_sub_web");
}

推荐几篇关于Iframe的文章：

声明：文章未声明为原创文章，本文链接 http://js8.in/664.html. 转载请注明转自 JS8.IN ™

随机文章

再谈Iframe的问题

三水清 — Wed, 10 Nov 2010 03:58:18 +0000

iframe是可以做的事情非常多，比如通过iframe实现跨域，使用iframe解决IE6下select遮挡不住的问题，通过iframe解决Ajax的前进后退问题，再比如通过iframe实现异步上传。在很早我就写过一篇文章说明了Iframe在IE、firefox下的一些DOM操作。今天结合最近项目中遇见的iframe问题，再来谈谈iframe的一些常见问题解决方案。

IE下iframe背景透明问题

在firefox下，iframe背景默认的是透明的，在IE下默认不是透明的，我们可以使用allowTransparency='true' 来设置IE下的iframe为透明，另外我们使用scrolling ='no' frameborder='0'分别来实现iframe页面没有滚动条，边框宽度。

IE6下iframe不显示的问题

不得不说IE6是个操蛋的浏览器，尤其是在中国！iframe有的时候在IE6中会出现不显示的问题，主要有以下几种原因，请一一排查：

可能你的iframe没有设置宽高，例如在table不居中，计算不出来td的高度，会导致这种问题

尝试使用下面的代码来重新载入IE6下的iframe页面：

setTimeout(function(){
	document.frames['fuckIE6'].location.reload();
},0)

传闻iframe标签中不要把src紧跟在iframe之后，也就是是错误的，不过我没有碰见过类似的问题，为了保险起见，还是不要写成上面的样式为妙。

iframe跨域问题

如果遇见了iframe跨子域的问题，可以尝试在父窗口和子窗口添加document.domain="js8.in"来解决。

iframe DOM操作问题

iframe的DOM操作，我在《使用JavaScript在IE和Firefox下进行iframe的DOM操作》中已经讲解的比较详细，并且有详细的演示，在子窗口B操作子窗口A的时候，我使用的是通过子窗口B操作父窗口来间接操作子窗口A，也就是说通过parent来选择子窗口A然后再对其进行操作。不要使用子窗口B来创建一个DOM对象然后插入到父窗口。因为这样的操作会在IE下出错！例如下面的例子：
子窗口中的js代码：

var div = document.createElement('div');
div.id="fuckIE6";
div.innerHTML="fuckIE6";
parent.document.getElementsByTagName('body')[0].appendChild(div);

上面的代码会在IE出现问题，所以正确的方法是：

var div = parent.document.createElement('div');
div.id="fuckIE6";
div.innerHTML="fuckIE6";
parent.document.getElementsByTagName('body')[0].appendChild(div);

也就是通过父窗口创建DIV标签，然后在插入到body之后。

声明：文章未声明为原创文章，本文链接 http://js8.in/638.html. 转载请注明转自 JS8.IN ™

随机文章

使用JavaScript在IE和Firefox下进行iframe的DOM操作

三水清 — Tue, 26 Jan 2010 04:59:38 +0000

昨天一个新来的同事关于iframe中进行DOM操作的问题，我说只要是不存在跨域的问题，是可以进行iframe 之间的DOM操作的。并且拿了以前写的两篇文章给新同事进行参考——《用document.domain+iframe实现Ajax跨子域》、《于Ajax在浏览器中产生前进后退的实现方法》。其中关于使用iframe进行跨域的demo，由于更换了新域名js8.in，导致了demo不能使用了，昨天紧急修改了一下，总算是可以使用啦~窃喜~

今天就写个完整的使用JavaScript进行iframe DOM操作的文章啦~跟大家讨论下IE和Firefox下iframe DOM操作的差异，然后写一个父窗口操作子窗口DOM，子窗口操作父窗口DOM，子窗口操作子窗口DOM的实例。经测试，断桥残雪写的iframe DOM操作实例，不仅仅只是在IE和Firefox下使用正常，而是可以兼容所有浏览器的。本文只是借IE和Firefox在iframe DOM操作的不同，进行分析说明JavaScript在DOM操作中两者的不同。

IE和Firefox对iframe document对象的差异性

在IE6、IE7中，我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象，可是这是不符合W3C标准的写法，也是IE下独有的方法，在Firefox下却不可以使用，Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法，今天我在写实例的时候，通过IE8进行测试，IE8也是使用的符合W3C标准的 document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IE和Firefox下通用的获取iframe document对象的函数—getIFrameDOM：

function getIFrameDOM(id){
	return document.getElementById(id).contentDocument || document.frames[id].document;
}

P.S.:如果我们要获取iframe的window对象，而不是document对象，可以使用document.getElementById(ID).contentWindow的方法。这样我们就可以使用子窗口中的window对象了，比如子窗口中的函数。

在子窗口使用父窗口的函数，获取父窗口document对象

在子窗口中，我们可以通过parent就可以获得父窗口的window对象，如果假如我们在父窗口有一个函数为getIFrameDOM，我们可以通过parent.getIFrameDOM来调用，同理我们使用parent.document就可以在子窗口中访问父窗口的document对象了。

使用JavaScript进行iframe的DOM操作实例

首先，我们在父窗口中引入两个iframe子窗口，ID分别为wIframeA、wIframeB，地址分别为：a.html、b.html。
父窗口主要HTML代码如下：

此处可通过iframeB的JavaScript函数，来替换哦~

在子窗口A、B中我放了一个ID为hello的P，以方便我们进行DOM操作演示，子窗口A、B的主要HTML代码如下：

Hello World!

1、在iframe中，父窗口操作子窗口的DOM

建好了父窗口跟子窗口，这样我们可以在父窗口中，通过以下iframeA()函数来把子窗口A更换P的背景颜色为红色：

function iframeA(){//给子窗口A改变ID为hello的背景色
	var a = getIFrameDOM("wIframeA");
	a.getElementById('hello').style.background = "red";
}
function getIFrameDOM(id){//兼容IE、Firefox的iframe DOM获取函数
	return document.getElementById(id).contentDocument || document.frames[id].document;
}

2、在iframe中，子窗口操作父窗口的DOM

在子窗口中，我们可以方便的进行父窗口DOM操作，只需要在DOM操作之前添加亦歌parent对象的方法就可以啦，如：在上面的子窗口B中，我们可以使用下面的代码把，父窗口中ID为“pHello”的内容给替换掉:

parent.document.getElementById("pHello").innerHTML="O(∩_∩)O哈哈~用子窗口B就可以替换你！不服吗？
";

3、在iframe中，子窗口A操作子窗口B的DOM

既然子窗口可以操作父窗口的window对象和document对象，那么子窗口也可以操作另外的子窗口的DOM啦~断桥残雪在子窗口B中可以直接使用parent直接调用父窗口中的getIFrameDOM函数获得子窗口A的document对象，这样要修改子窗口A的内容就很简单啦，如以下的代码：

var a=parent.getIFrameDOM("wIframeA");
a.getElementById('hello').innerHTML="看，俺子窗口B也能DOM你A！";

完整的实例演示

点击下面地址就可以看到断桥残雪写的完整的iframe DOM操作的演示啦：

JS进行iframe的DOM操作演示点击查看

到这里，你还会以为iframe的DOM操作很难吗？嘿嘿~我想有了父窗口操作子窗口DOM，子窗口操作父窗口DOM，子窗口操作子窗口DOM这三个实例讲解，我们就可以对iframe的DOM操作了如指掌啦~其实iframe在我们开发中还有很多灵活的用法，比如跨域、实现Ajax的前进后退，该兴趣的童鞋可以继续深入的阅读下面两篇文章：用document.domain+iframe实现Ajax跨子域》、《于Ajax在浏览器中产生前进后退的实现方法》

声明：文章未声明为原创文章，本文链接 http://js8.in/463.html. 转载请注明转自 JS8.IN ™

随机文章

用document.domain+iframe实现Ajax跨子域

三水清 — Sat, 09 Jan 2010 09:03:36 +0000

Ajax跨域一直是个比较麻烦的问题，例如：断桥残雪在一个项目中使用了open打开一个跟父窗口不同域名的新页面，结果子窗口就不能传值给父窗口了；再如：我在www.2fool.cn下不可以获取love.2fool.cn域名下的页面内容。浏览器的跨域限制是为了安全，可是当我们想要在一个域名下请求另外一个域名的内容的时候就感觉不那么爽了。

我在WordPress天气插件、滔滔API接口处理上都使用了JSONP的方法来实现的跨域。而今天我要通过使用JS的document.domain和iframe来解决Ajax跨子域的问题。

原理

通过给主页面跟请求页面设置相同的document.domain来，欺骗浏览器，达到Ajax跨子域的效果，此方法在IE，chrome，Firefox，Safari，Opera下测试通过。

缺点：无法实现不同主域名之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。

使用document.domain+iframe跨域实例

首先我们假设主页面地址为：http://js8.in/mywork/crossdomain/index.html，我们要加载的内容是位于work.2fool.cn域名下的helloworld.txt。我们需要在主页面中设置document.domain为2fool.cn，然后主页面添加一个iframe，src为域名work.2fool.cn下的一个url，在iframe页面中同样设置document.domain为2fool.cn，同时iframe中需要添加Ajax的函数，例如引入jQuery.js。

主页index.html的主要代码如下：

iframe页面主要代码如下：

演示Demo

演示地址：http://js8.in/mywork/crossdomain/index.html

演示下载：http://js8.in/mywork/crossdomain/crossdomain.zip

声明：文章未声明为原创文章，本文链接 http://js8.in/443.html. 转载请注明转自 JS8.IN ™

随机文章

关于Ajax在浏览器中产生前进后退的实现方法

三水清 — Fri, 30 Oct 2009 20:44:01 +0000

关于Ajax在使用中要使浏览器产生前进后退的方法，网上比较多的方法有两种：一是采用hash值的方式，这是我们在地图preview版中使用的方法（采用jQuery的history插件）；二是使用iframe的方法，目前百度地图、Google地图采用。为使我们以后的mymap方便引用到博客等网页内容中去，并且给地图添加复制链接的方法，我们决定把地图中Ajax在浏览器产生前进后退的方法改变为iframe的方法。

实现的机制

主要使用的两个html：index.html，history.html（iframe src地址）。
主要代码参考index.html以及history.html的js部分:

现在说说实现的方式

Index.html中代码解释：
wHistory.init();
给body插入iframe跟一个表单（主要用于Safari浏览器、或者其他特殊使用，比如复制地址方面，直接取值input的value即可，不需要处理，而取iframe的src还要进行字符串的处理）

判断是否为Safari浏览器，如果是则特殊处理一下，根据不同的浏览器定义main函数

Callback函数处理返回的信息。

History.html中代码解释

对框架中的src进行处理，运行父窗口中的函数wHistory.callback();

测试中使用的浏览器：IE6+ ，FF， Opera10 ，Safari4，chrome欢迎大家测试其他版本的浏览器，发现问题及时提出

演示地址：http://js8.in/mywork/ajax_history_demo

下载地址：http://js8.in/uploads/soft/ajax_history_demo.rar

声明：文章未声明为原创文章，本文链接 http://js8.in/311.html. 转载请注明转自 JS8.IN ™

随机文章

猜你喜欢：
用document.domain+iframe实现Ajax跨子域	使用hash来实现Ajax前进后退	Ajax评论bug更新	使用JavaScript在IE和Firefox下进行iframe的DOM操作
无觅

猜你喜欢：
关于wBox iFrame回调关闭问题的解决方案	使用JavaScript在IE和Firefox下进行iframe的DOM操作	用document.domain+iframe实现Ajax跨子域	再谈Iframe的问题
无觅

猜你喜欢：
再谈Iframe的问题	javascript获取隐藏dom的宽高	iframe自适用高度代码	用document.domain+iframe实现Ajax跨子域
无觅

猜你喜欢：
关于Ajax在浏览器中产生前进后退的实现方法	[转]利用跨域资源共享（CORS）实现ajax跨域调用	再谈Iframe的问题	使用JavaScript在IE和Firefox下进行iframe的DOM操作
无觅