js更新iframe的src或者location.href如果按钮速度过快，则不能加载完全，显示白板

To meizz:
修改后，如果当某个iframe处于正在加载中的时候，再马上点按钮，使其他iframe加载，
则刚才的iframe 将停止加载，显示空白，察看源代码发现 iframe 内没有加载完毕。
代码如下：<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<META HTTP-EQUIV=pragma CONTENT=no-cache>
<META HTTP-EQUIV=expires CONTENT=0>
<meta content="all" name="robots" />
<meta name="Author" content="[email protected] ,ｻ銧ﾐﾗﾓ" />
<meta name="Copyright" content="www.AspxBoy.Com,ﾗﾔﾓﾉｰ貶ｨ,ﾈﾎﾒ籏ｪﾔﾘ." />
<meta name="Description" content="www.AspxBoy.Com" />
<meta name="Keywords" content="www.AspxBoy.Com,ｻ銧ﾐﾗﾓ,huobazi" />
<title> New New Document</title>
<style>
.f{width:0px;height0px;}
</style>
<script language="javascript">
function add(frameId)
{
if(frameId == 'a1')
{
frameSrc = 'http://www.baidu.com';
}
else if(frameId == 'a2')
{
frameSrc = 'http://www.gotdotnet.com';
}
else if(frameId == 'a3')
{
frameSrc = 'http://www.asp.net';
}
else if(frameId == 'a4')
{
frameSrc = 'http://www.microsoft.com';
} frameCollection = document.getElementsByTagName('iframe');
for(i = 0; i< frameCollection.length; i++)
{
if(frameCollection[i] != null)
{
frameCollection[i].style.width  = '0';
frameCollection[i].style.height  = '0';
}
}
document.getElementById(frameId).style.width = '300';
document.getElementById(frameId).style.height = '200'; frames[frameId].document.body.innerHTML = 'loading...';
frames[frameId].location.href = frameSrc;

var str = '<a href=javascript:go(\''+frameId+'\')>[  '+frameId+'  ]</a>'; document.getElementById('top').insertAdjacentHTML("beforeEnd",str);
}function go(frameId)
{
frameCollection = document.getElementsByTagName('iframe');
for(i = 0; i< frameCollection.length; i++)
{
if(frameCollection[i] != null)
{
frameCollection[i].style.width  = '0';
frameCollection[i].style.height  = '0';
}
}
obj = document.getElementById(frameId);
if(obj != null)
{
obj.style.width = '300';
obj.style.height = '200';
}
}
</script>
</head>
<body>
<table style="width:760px; height:500px" border="1">
<tr>
<td>
<button onclick="add('a1');">Add</button><br />
<button onclick="add('a2');">Add</button><br />
<button onclick="add('a3');">Add</button><br />
<button onclick="add('a4');">Add</button><br />
</td>
<td width="85%">
<div id="top"></div>
<div id="div">
<iframe name="a1" id="a1" class="f"></iframe>
<iframe name="a2" id="a2" class="f"></iframe>
<iframe name="a3" id="a3" class="f"></iframe>
<iframe name="a4" id="a4" class="f"></iframe>
</div>
</td>
</tr>
</table></body></html>

这个问题我搞过，不过用 location.href 有一点不好的地方就是会有跨域问题，比如iframe里已经加载过其它的站点的页面，就不能再用location.href 给它赋值了，否则就报错。因此我建议使用src，至于这个过渡效果是我个人测试出来的，即在页面跳转之前新 write 进去一些提示信息然后再跳转到目标页面，那么在目标页面加载完毕之前这个提示文字是不会消失的。

感谢 meizz的帮助。
不过，我现在需要解决的是：叶面上有多个iframe，每个按钮点击得时候，更改对应的iframe的src或者location.href
经过测试 src或者location.href 都可以
但问题是：如果点一个按钮后当他对应的iframe 还没有加载完毕，另外一个按钮马上点击，
此时刚才那个iframe 的宽高度被我设置为0或者设置style使他隐藏，同时给另外一个iframe
src设置，这时候刚才那个没有iframe 就停止加载了。
你可以运行以下我写的代码，快速的点每个按钮，那么就有某个iframe 没有加载，而、右键查iframe内的源代码，发现叶面加载了一半甚至更少。我想得到的效果是，点了按钮再点其他按钮隐藏该iframe 但他仍然可以加载，而不是停止下来，那么就显示一个空白了。谢谢！

<input type="button" value="meizz" onclick="hehe('http://writeblog.csdn.net')" />
<iframe name="mm" id="iframe1" width="100%" height="300px"></iframe>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>你也可以参考一下 http://writeblog.csdn.net 这个页面的 multipage 代码

设置一个XMLHttpRequest a，判断a的readyState，
frames["a1"].document.body.innerHTML = "正在加载，请等待……";
状态4时再读入页面。frames["a1"].document.body.innerHTML = a.responseBody.

XMLHttpRequest 已经被禁止跨域了，所以解决不了跨域问题。
应该说IE是单线程的访问，即一个HTTP请求会阻滞后面的请求。

To meizz:你试验运行如下代码，请快速的点了 test2按钮后马上点 meizz按钮，则会出现
iframe2加载不完全的现象阿。
另外，我只是做实验，实际应用中我只能iframe 本站点/应用程序下的叶面，
但是为了用户在一个叶面内输入数据后再切换到其他标签，又切换回来，刚才输入的数据要保存的问题，才用iframe 模拟标签效果的。<input type="button" value="meizz" onclick="hehe('http://writeblog.csdn.net')" />
<input type="button" value="test2" onclick="hehe2('http://www.asp.net')" />
<iframe name="mm" id="iframe1" width="100%" height="300px"></iframe>
<iframe name="aa" id="iframe2" width="100%" height="300px"></iframe>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

http://writeblog.csdn.net 好象没有你的此类问题呀。你的代码我也测试了，在点击 test2 后迅速再点击 meizz 后，第一个点击的对应 iframe 实际上并没有中断掉，我这边等了大概有二十多秒后页面出来了。

你在http://writeblog.csdn.net 内相册标签内新建相册的textbox内输入数据，然后切换到关键字标签内再切换回来相册内输入的数据没有保存，也就是说他类似每次都重新加载 web叶面到一个 iframe 内，所以没有“保存“到刚才输入的数据可能你那边网络速度比较快，我测试下面的iframe 一直在 loading....

writeblog.csdn.net 我做了一点手脚，就是每次点击标签的时候实际上是iframe重新加载，这个与你的多少有点不同，不过不要紧，你的代码我测试着没有问题！

经测试，timeout设置为300的时候很少出现 “空白“现象，但偶尔还是有的，
iframe停止加载后，查看其源代码，发现只有一部分，而且不再增加。iframe.contentWindow.document.write("<div style='height: 100%; background-color: yellow'>loading...</div>");

    setTimeout(function()
    {
iframe.contentWindow.document.close();
        iframe.src = frameSrc;
    }, 300);

To meizz：如果使用单个iframe 如何每次切换标签的时候将用户刚才的输入，dropdownList autopostback后的状态保存呢？假定csdnblog需要这样的需求，应该从何入手呢？

在IFrame同样有个方法onreadystatechange，这个方法告诉你当前的Iframe已经加载完毕了。你可以控制不让用户点那个按钮这个方法在FckEditor这些里面都有使用，能保证你不会再刷新第二次。

楼兄的问题典型的是IE的单线程的问题，就是 frame只能一个一个的加载.顶

调试易

js更新iframe的src或者location.href如果按钮速度过快，则不能加载完全，显示白板

解决方案 »