JavaScript笔记之框架-js教程-PHP中文网

JavaScript笔记之框架

高洛峰

发布： 2016-11-26 09:36:14

原创

1344人浏览过

（一）在框架中共享函数
      一种常用的框架布局使用一个固定的导航框架，显示不同页面的内容框架。同样，将对外部javascript文件的调用放在总是显示的页面（框架集页面）中是有意义的，这样就不必在每个可能显示的页面中都重复包含这个调用。
      下面的示例使用的功能让许多页面共享一个函数，这个函数返回一个随机的广告条图像。
frameset.html
[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脚本将页面加载进框架集

[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.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
[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="http://www.php1.cn/">     <a href="http://www.php1.cn/">     <a href="http://www.php1.cn/">     </h2>
</body>
</html>
framea.html
[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]
<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]
<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的脚本：
[javascript]
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="http://www.php1.cn/">     return false;
}
target设置为"content"，onclick处理程序设置为setiFrame函数，点击链接就会触发setiFrame()函数，这个函数将新页面加载进iframe。