本文介绍了一个使用HTML与JavaScript实现的多页面导航系统。通过主页面main.html中的iframe加载iframe.html，后者负责向主页面添加导航条内容，并跳转至内容页面content.html。文章重点讨论了DOM对象在不同页面间的交互问题。
假如有3个页面
main.html(主要负责iframe中间页面) 包含 iframe.html(主要负责出数据,跳转到真实内容页面)
内容页面为 content.html(真实内容)
这几个页面加在一起,主要实现导航功能.
中间注意DOM 对象的跨页面问题!!!!!
main.html
<html> <head> <title>Main</title> </head> <body> <div id="navigator"><label>Navigator Bar : </label><a href="main.html">Home</a><label> > </label></div> <iframe src="iframe.html" name="content" width="90%" height="90%"></iframe> </body></html><html> <head> <title>iframe</title>
<script type="text/javascript">...
function navigator(anchor)...{
//navigator div element in parent page var navigatorBar = window.parent.document.getElementById("navigator"); //attention!!! //when create an object,you can only use it in the page where create the object,cann't cross pages var newAnchor = window.parent.document.createElement("a"); newAnchor.href = anchor.href; newAnchor.target = "content"; newAnchor.appendChild(window.parent.document.createTextNode(anchor.firstChild.nodeValue)); //append anchor to parent page navigatorBar.appendChild(newAnchor);
}
</script> </head> <body> <a href="content.html"onclick="navigator(this)">Add this anchor to parent page</a> </body></html><html> <head> <title>Content</title> </head> <body> <p>Content Page</p> </body></html>
扫一扫
1667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
