首页 > web前端 > js教程 > 正文

JavaScript笔记之框架

高洛峰
发布: 2016-11-26 09:36:14
原创
1230人浏览过

(一)在框架中共享函数
      一种常用的框架布局使用一个固定的导航框架,显示不同页面的内容框架。同样,将对外部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]
nbsp;
        "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。
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号