Mot*_*tti 16 html javascript iframe dom
为了在框架层次结构中玩一下,我写了一个小的html页面,允许嵌套任意数量的帧(问题末尾可用的代码).
但是这不起作用,在IE9和Firefox 4上创建了内部框架但没有渲染(head
并且body
为空):
在Chrome上它可以工作两个级别然后如果我单击Add
内部框架上的按钮没有任何反应(控制台中也没有错误消息).
如果我复制文件N
次数并让每个文件使用不同的文件,它适用于任何深度(但如果有一个循环则不行).
我试图搜索这样的限制,但我不能使用正确的关键字.有没有人对此有任何参考?
这是addRemoveFrames.html文件:
<!DOCTYPE html>
<html>
<head>
<title>Add and Remove Frames</title>
<script type="text/javascript">
function add() {
var f = document.createElement('iframe');
f.src = 'addRemoveFrames.html';
document.getElementById('frameContainer').appendChild(f);
}
function remove() {
var c = document.getElementById('frameContainer');
var f = c.lastChild;
if (f)
c.removeChild(f);
}
</script>
</head>
<body>
<input type="button" onclick="add()" value="Add"/>
<input type="button" onclick="remove()" value="Remove"/>
<hr />
<div id="frameContainer"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我稍微修改了@davin的答案,因此每个框架的URL反映了它在层次结构中的完整路径.
var counter = 0;
function add() {
var f = document.createElement('iframe');
var sep = location.search ? (location.search + '.') : "?";
f.src = 'addRemoveFrames.html' + sep + ++counter;
document.getElementById('frameContainer').appendChild(f);
}
Run Code Online (Sandbox Code Playgroud)
dav*_*vin 12
看起来像一个明智的浏览器安全机制,以防止嵌套iframe的无限循环(即使在你的情况下,它不会是无限的).
在任何情况下,一个简单的解决方法可能是向URL添加一个无用的查询参数,使浏览器认为加载的页面不相同,但确实如此.
所以不是你当前的函数add()
,而是像这样(我全力以赴,所以id
不会对全局命名空间进行调查):
var add = (function(){
var id = 0;
return function(){
var f = document.createElement('iframe');
f.src = 'addRemoveFrames.html?useless=' + id++;
document.getElementById('frameContainer').appendChild(f);
};
})();
Run Code Online (Sandbox Code Playgroud)
以下是官方参考:实施HTML框架 - W3C工作草案31-Mar-97.标题是"无限递归"并指出如果src
等于父URL,则应将其视为空.
我建议使用该技术davin
,或使用纯DOM来创建嵌套元素而不是IFRAME
s,这将使编程更改更容易,并可能使用更少的内存,以及避免延迟加载的问题.
归档时间: |
|
查看次数: |
7540 次 |
最近记录: |