ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript メモ取りフレームワーク

JavaScript メモ取りフレームワーク

高洛峰
高洛峰オリジナル
2016-11-26 09:36:141039ブラウズ

(一)在框架中共享函数
      一种常用的框架布局使用一个固定的导航框架,显示不同页面的内容框架。同样,将对外部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 
   
 

現在表示しているページは 1 ページ目

  
 
 

frameb.html
[html]
 
 
フレーム内に含める必要があります 
 
<本文 bgcolor="#FFFFFF"> 

 
今日の注目サイト:
 
banner 
 

現在表示しているページは 2 ページです

  
 
 

framec.html
[html]
 
 
フレーム内に含める必要があります 
 
<本文 bgcolor="#FFFFFF"> 

 
今日の注目サイト:
 
banner 
 

現在表示しているページは 3 ページです

  
 
 

上記のすべてのファイルを同じファイル パッケージに配置します。
(二)JavaScript を使用して iframe を追加する
もちろん、JavaScript を使用せずに iframe に書き込まれる内容は必ずしも必要ではなく、他の HTML ページを追加することが望ましい場合もあります。 iframe の最初のコンテンツのトップ面、さらに 3 つの単一の 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/">     false を返します。 
}
ターゲットは「コンテンツ」に設定され、onclick 処理プログラムは setiFrame 関数に設定され、ポイント接続で setiFrame() 関数が起動され、この関数により新しい面が iframe に追加されます。