js之帧中的导航栏

本例来自于js权威指南，使用的技术包括：

１　location.href查询当前URL，通过设置location载入新的文档

２　History对象的back()和forward方法

３　使用setTimeout()延迟函数的调用

４　使用window.open()打开新窗口

５　帧交互

６　处理同源策略所施加的限制

html代码如下：

<frameset rows="*,75">

<frame src="about:blank" name="main">

<frame src="navigator.html">

</frameset>

navigator.html页面中的脚本及表单

<form name="navbar" onsubmit="go();return false">

<input type="button" value="向后" onclick="back();">

<input type="button" value="向前" onclick="forward">

URL:<input type="text" name="url" size="50">

<input type="button" value="转到" onclick="go()">

<input type="button" value="打开新窗口" onclick="displayInNewWindow()">

</form>

<script>

function back(){

//首先，清空URL输入框

document.navbar.url.value="";

//使用History对象返回，除非同源策略thwarts我们

try{parent.main.history.back();}

catch(e){alert("同源策略阻止了History.back(): "+e.message);}

//显示退回到的文档的URL，由延迟的updateURL()完成

setTimeout(updateURL,1000);

}

function forward(){

document.navbar.url.value="";

try{parent.main.history.forward();}

catch(e){alert("同源策略阻止了History.forward(): "+e.message);}

setTimeout(updateURL,1000);

}

//updateURL用于被forward()和back()调用来更新表单中的URL文本框，通常同源策略会阻止这一行为

function updateURL(){

try{document.navbar.url.value= parent.main.location.href;}

catch(e){document.navbar.url.value="<Same-origin policy prevents URL access>";}

}

//若URL并未以http://开头，fixup将其添加到URL中

function fixup(url){

if(url.substring(0,7) !="http://") url="http://"+url;

return url;

}

function go(){

parent.main.location=fixup(document.navbar.url.value);

}

function displayInNewWindow(){

window.open(fixup(document.navbar.url.value));

}

</script>