Javascript学习之窗口与框架
先恶补一下框架方面的知识
HTML Iframe 内联框架
用于在网页内显示网页。如下图：
Iframe id：返回或设置iframe的id；name：设置或返回iframe的名称；src：iframe中的文档的URL。
<iframe src=\'#\'" /iframe> #URL指向隔离页面的位置
Height和width属性设置iframe的高度和宽度
Frameborder属性规定是否显示iframe周围的边框
Iframe可用作链接的目标（target）
链接的target属性必须引用iframe的name属性：
例：
- <iframe src=”demo_iframe.html” name=”iframe_a”></iframe>
- <p><a href=http://www.w3school.com.cn target=”iframe_a”>www.w3school.com.cn</a></p>
在主内容区域的链接可以通过目标区域作用于iframe。要使用HTML加载iframe，可以使用<a>标签的target特性。不过很多网站使用的仍然是XHTML，如果开发人员要在XHTML Strict下使用iframe的话，设置target只能通过Javascript。这是因为XHTML Sctipt不支持target特性，开发人员必须自行设置目标才能更新iframe。（我将html标签前的文档类型改为严格，但是target属性仍然可以使用，就是说我测试和上面说的不同）
例1：
- <style type="text/css">
- body {
- background-color:#fff;
- }
- iframe#icontent {
- float:right;
- border:1px solid black;
- width:350px;
- height:300px;
- margin-top:100px;
- }
- #nav {
- width:100px;
- }
- </style>
- <iframe src="iframe.html" name="icontent" id="icontent"></iframe>
- <h1>Main Content Area</h1>
- <div id="nav">
- <h2>
- <a href="page1.html">Link 1</a>
- <a href="page2.html">Link 2</a>
- <a href="page3.html">Link 3</a>
- </h2>
- </div>
Javascript代码（方法1）：
- <script type="text/javascript">
- window.onload = initLinks;
- function initLinks(){
- for(var i=0;i<document.links;i++){
- document.links[i].target = "icontent"; <!--当发现链接时，将target属性设置为字符串“icontent”-->
- }
- }
- </script>
Javascript代码（方法2，使用Javascript加载iframe）：
- <script type="text/javascript">
- window.onload = initLinks;
- function initLinks(){
- for(var i=0;i<document.links;i++){
- document.links[i].target = setContent;
- }
- }
- function setContent(){
- document.getElementById("icontent").contentWindow.document.location.href = this.href;
- return false; <!--返回false，告诉浏览器不要将href一并载入主窗口。所有功能都通过Javascript实现了，无需载入href-->
- }
- </script>
当iframe载入的文档的域名与主窗口不一样时，会报错
比如设置iframe的src=\'#\'" //www.baidu.com”,当点击链接时会报错：
即没有获取iframe的document的权限，这是浏览器的同源策略。不能获取不同域的文档对象。
例2；
此例能实现点击链接，框架中页面根据点击显示对应页面的效果：
HTML && CSS 代码
- <!--样式同上例-->
- <body>
- <iframe src="" name="icontent" id="icontent"></iframe>
- <h1>Main Content Area</h1>
- <div id="nav">
- <h2>
- <a href="#">Link 1</a>
- <a href="#">Link 2</a>
- <a href="#">Link 3</a>
- </h2>
- </div>
- </body>
显示效果：
Javascript代码及注释：
- <script type="text/javascript">
- window.onload = initLinks;
- function initLinks(){
- for(var i=0;i<document.links.length;i++){
- document.links[i].onclick = writeContent;
- document.links[i].thisPage = i+1;
- }
- }
- function writeContent(){
- var newText = "<h1>You are now looking at Example " + this.thisPage + ".<\/h1>";
- document.getElementById("icontent").contentWindow.document.body.innerHTML = newText;
- return false;
- }
- <!--The contentWindow property returns the Window object generated by a frame or iframe element (through the window object, you can access the document object and then any one of the document's elements).-->
- <!--conntentWindow属性返回由frame或iframe元素产生的Window对象，你能得到document对象，然后就能操作所有的文档元素了-->
- </script>
效果如下图，点击Link2后的结果：
只要窗口和iframe都来自同样的域，那么它们共享单个外部Javascript文件是很方便的。下面一个例子是通过iframe加载Javascript文件来演示它如何被主窗口调用的。
HTML代码：
- <body>
- Today's Featured site:
- <img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" />
- <iframe src="iframe.html" name="icontent" id="icontent"></iframe>
- <h1>Main Content Area</h1>
- <div id="nav">
- <h2>
- <a href="#">Link 1</a>
- <a href="#">Link 2</a>
- <a href="#">Link 3</a>
- </h2>
- </div>
- </body>
iframe.html页面代码：
- <script type="text/javascript">
- window.onload = initLinks;
- var bannerArray = new Array("images/redBanner.gif","images/greenBanner.gif","images/blueBanner.gif");
- function initLinks(){
- for(var i=0;i<parent.document.links.length;i++){
- parent.document.links[i].onclick = setBanner;
- }
- setBanner();
- }
- function setBanner(){
- var randomNum = Math.floor( Math.random() * bannerArray.length ); <!--产生随机数字-->
- parent.document.getElementById("adBanner").src = bannerArray[randomNum];
- return false;
- }
- </script>
- <body>
- Please load a page
- </body>
点击链接，主窗口中的图片颜色（其实是不同图像）会随机的发生变化。
