Window,Document,Frame的理解，帮助理解左侧导航栏的实现原理

来源：互联网发布：文明网络行教学反思编辑：程序博客网时间：2024/06/16 09:33

Window好比一个大的窗口，如果我们在里面嵌入一个iframe,好比在这个大窗口里放一个小window,自然也就多了一个小document

window.frames此时长度为1

如图所示，原理是这样的，整个就是一个大的window,当我们点击左侧连接，动态的

创建一个ifame,根据秀才所给的例子，直接就能使用了，然而例子中

创建的ifame没有名字，给后面访问ifame带来了不便，于是我修改了createFrame方法，截取url中的不带扩展名的文件名作为ifame

function createFrame(url)
{
   var name = getUrlToName(url);
   console.info(name);
   var s = '<iframe scrolling="auto" frameborder="0" src="'+url+'" name = "' + name + '" style="width:100%;height:100%;"></iframe>';
   return s;
}

这样根据名称我们就能轻松访问到ifame了

例如：

window.frames['ifame的名称];

这样写的前提是ifame是有名称的，开始我不知道这一点，所以没有访问到

w3cshool:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("#span1").text($(window).height());
$("#span2").text($(document).height());
});
});
</script>
</head>
<body>
<p>窗口的高度是 <span id="span1">unknown</span> px。</p>
<p>文档的高度是 <span id="span2">unknown</span> px。</p>
<button class="btn1">获得高度</button>
<p>在本例中，窗口和文档的高度是相同的，因为它们在 iframe 中显示。</p>
</body>
</html>

窗口的高度是 400 px。

文档的高度是 400 px。

在本例中，窗口和文档的高度是相同的，因为它们在 iframe 中显示。

其实这里弹出的高度是小window窗口的高度，有个iframe，意味着里面有个小window,在w3cshool测试发现，

0 0