对象只能添加到创建它的页面上,不可以跨页面

来源:互联网 发布:中国历年财政支出数据 编辑:程序博客网 时间:2024/06/06 07:12

 假如有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><href="main.html">Home</a><label> &gt; </label></div>
        
<iframe src="iframe.html" name="content" width="90%" height="90%"></iframe>
    
</body>
</html>
iframe.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>
        
<href="content.html"onclick="navigator(this)">Add this anchor to parent page</a>
    
</body>
</html>
content.html
<html>
    
<head>
        
<title>Content</title>
    
</head>
    
<body>
        
<p>Content Page</p>
    
</body>
</html>
原创粉丝点击