JavaScript笔记之框架
来源:互联网 发布:it是什么 编辑:程序博客网 时间:2024/05/22 06:54
(一)在框架中共享函数
一种常用的框架布局使用一个固定的导航框架,显示不同页面的内容框架。同样,将对外部JavaScript文件的调用放在总是显示的页面(框架集页面)中是有意义的,这样就不必在每个可能显示的页面中都重复包含这个调用。
下面的示例使用的功能让许多页面共享一个函数,这个函数返回一个随机的广告条图像。
frameset.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a frameset's functions from a frame</title><script type="text/javascript" src="script.js"></script></head><frameset cols="30%,70%"><frame src="left.html" name="left" id="left"/><frame src="framea.html" name="content" id="content" /></frameset></html>
script.js脚本将页面加载进框架集
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.length;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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Nav Bar</title></head><body bgcolor="#FFFFFF"><h1>Navigation Bar</h1><h2><a href="framea.html">Page 1</a><br /><a href="frameb.html">Page 2</a><br /><a href="framec.html">Page 3</a></h2> </body></html>
framea.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Must be in a frame</title></head><body bgcolor="#FFFFFF"><div align="center">Today's Featured site:<br /><img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" /></div><h1>You are now looking at page 1</h1> </body></html>
frameb.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Must be in a frame</title></head><body bgcolor="#FFFFFF"><div align="center">Today's Featured site:<br /><img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" /></div><h1>You are now looking at page 2</h1> </body></html>
framec.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Must be in a frame</title></head><body bgcolor="#FFFFFF"><div align="center">Today's Featured site:<br /><img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner" /></div><h1>You are now looking at page 3</h1> </body></html>
把以上所有文件放在同一个文件夹。
(二)用JavaScript加载iframe
当然不一定非用JavaScript写入iframe的内容,可能希望加载其他HTML页面。
建立iframe的主页面,一个提供iframe初始内容的页面,另外还有三个简单的HTML页面,下面给出把它们加载进iframe的脚本:
window.onload=initFrame;function initFrame(){for(var i=0;i<document.links.length;i++){document.links[i].target="content";document.links[i].onclick=setiFrame;}}function setiFrame(){document.getElementById("content").contentWindow.document.location.href=this.href;return false;}
target设置为"content",onclick处理程序设置为setiFrame函数,点击链接就会触发setiFrame()函数,这个函数将新页面加载进iframe。
- JavaScript笔记之框架
- JavaScript学习笔记6-单元测试框架之Jasmine
- javascript之AJAX框架
- Javascript框架之dhtmlXGrid
- Javascript框架之DataTables
- javascript(五)之框架
- JavaScript框架:AngularJS 学习笔记
- javascript框架之继承机制
- javascript框架之继承机制javascript
- 学习笔记之JavaScript
- JavaScript之DOM笔记
- javascript笔记之------Function
- JavaScript笔记之-AJAX
- JavaScript高级程序设计之BOM之window 对象之窗口关系及框架 第8.1.2讲笔记
- JavaScript 框架开发笔记 [一] 寻找namespace
- JavaScript 框架开发笔记 [四] Ajax,XML
- [学习笔记]JavaScript基础--完美运动框架
- javascript以及衍生框架自学笔记
- 北理工2011年计算机复试上机题(二)
- PrintWriter和FileWriter这两个类有什么区别
- Organization Pages
- GLOOX 1.0 API ----框架
- java关于23种设计模式之泡MM版(推荐)
- JavaScript笔记之框架
- 下面就是用 SysErrorMessage 获取的部分系统错误信息表
- Memcached简介
- 电脑右下角安全删除u盘图标不见了? 解决方法
- word画物理图(赞)
- javascript 邮箱管理程序
- AJAX请求并发问题
- ★☆【启发式搜索】【图论】Remmarguts' Date
- Http协议请求响应详解