Home > Web Front-end > JS Tutorial > JavaScript note-taking framework

JavaScript note-taking framework

高洛峰
Release: 2016-11-26 09:36:14
Original
1105 people have browsed it

(一)在框架中共享函数
      一种常用的框架布局使用一个固定的导航框架,显示不同页面的内容框架。同样,将对外部JavaScript文件的调用放在总是显示的页面(框架集页面)中是有意义的,这样就不必在每个可能显示的页面中都重复包含这个调用。
      下面的示例使用的功能让许多页面共享一个函数,这个函数返回一个随机的广告条图像。
frameset.html
[html]
 
 
    Using a frameset's functions from a frame 
     
 
 
     
     
 
 
script.js脚本将页面加载进框架集
 
[javascript]
var bannerArray=new Array("images/redBanner.gif","images/greenBanner.gif" ,"images/blueBanner.gif"); 
 
window.onload=initFrames; 
 
function initFrames(){ 
    var leftWin=document.getElementById("left").contentWindow.document; 
    for(var i=0;i leftWin.links[i].target="content";
leftWin.links[i].onclick=resetBanner;
}
setBanner();
}

function setBanner(){
var contentWin=document.getElementById("content").contentWindow.document;
var randomNum=Math.floor(Math.random()*bannerArray.length);

contentWin.getElementById("adBanner").src=bannerArray[randomNum];
}

function resetBanner(){
setTimeout(setBanner,1000);
}
resetBanner函数等待内容框架加载新页面,在此后它调用setBanner()来重新设置广告条。如果不这么做,而是直接调用setBanner(),那么新的内容页面可能还没有加载,在这种情况下,就会遇到问题:要么是出现错误(因没找到adBanner),要么是重新设置了旧的adBanner——未被加载页面上的adBanner.
注意:resetBanner不返回false,这意味着浏览器不但执行这里的操作,而且会从href加载页面,这个脚本需要浏览器从href加载页面,这就是同时设置onclick处理程序和target的原因。

left.html
[html]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
    Nav Bar 
 
 
   

Navigation Bar

 
   

 
               

  
 
 
framea.html
[html]
 
 
    Must be in a frame 
 
 
   
 
        Today's Featured site:
 
        banner 
   
 
   

You are now looking at page 1

  
 
 

frameb.html
[html]
 
 
    Must be in a frame 
 
 
   

 
        Today's Featured site:
 
        banner 
   
 
   

You are now looking at page 2

  
 
 

framec.html
[html]
 
 
    Must be in a frame 
 
 
   

 
        Today's Featured site:
 
        banner 
   
 
   

You are now looking at page 3

  
 
 
 
把以上所有文件放在同一个文件夹。
(二)用JavaScript加载iframe
     当然不一定非用JavaScript写入iframe的内容,可能希望加载其他HTML页面。
 建立iframe的主页面,一个提供iframe初始内容的页面,另外还有三个简单的HTML页面,下面给出把它们加载进iframe的脚本:
[javascript]
window.onload=initFrame; 
 
function initFrame(){ 
    for(var i=0;i        document.links[i].target="content"; 
        document.links[i].onclick=setiFrame; 
    } 

 
function setiFrame(){ 
    document.getElementById("content").contentWindow.document.location.href="http://www.php1.cn/">     return false; 

target设置为"content",onclick处理程序设置为setiFrame函数,点击链接就会触发setiFrame()函数,这个函数将新页面加载进iframe。


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template