js如何在当前页面打开子页面，不是打开新窗口

JavaScript020

js如何在当前页面打开子页面，不是打开新窗口,第1张

如果你这个子页面是属于另一个页面（与当前页面不是同一个文件），可以用iframe标签来打开。

如果是属以同一个页面的内容，那么可以在那个位置先放一个空白的div，通过css预先设定好width、height以及是否需要滚动条等等，并设定id（比如abc），然后在必要的时候（比如点击某个链接）用js给这个div添加内容：

var div=document.getElementById("abc")

div.innerHTML+="<p>要添加的内容1</p>"

div.innerHTML+="<p>要添加的内容2</p>"

div.innerHTML+="<p>要添加的内容3</p>"

div.innerHTML+="<p>要添加的内容4</p>"

或者也可以预先给这个div填充内容，并在css中把它的display属性设为none（即隐藏），然后在必要的时候把它显示出来即可：

var div=document.getElementById("abc")

div.style.display="block"

1、建立父级页面，首先建立一个父级页面parent.html,代码如图，一个pop函数方法，一个链接到child.html的iframe标签；

2、建立子页面，再新建一个child.html页面，如图，展示一个id=link的div标签，和link的点击事件，因为是调用父级方法，所以需要用到window.parent.pop()方法。

3、预览页面，预览页面，可明显看到parent.html里面的iframe框架，指向的就是child子页面

4、错误提示，点击页面中“调用父级pop方法”的文字链，会提示错误，这是因为没配置好域名等相关设置。

5、站点配置，打开iis，右键iframe文件夹——“管理文件夹”——“浏览”；即可打开本地测试地址；（如小伙伴没配置iis，需要先配置iis建立站点）

6、成功调用父级方法，再次点击“调用父级pop方法”的文字链，即可成功弹出提示。

下面以三个页面分别命名为l l l为例来具体说明如何做

其中l由上下两个页面组成 代码如下

<!DOCTYPE HTML PUBLIC //W C//DTD HTML Transitional//EN ><HTML><HEAD><TITLE>frameDemo </TITLE></HEAD><frameset rows= % % ><frame name=top src= l ><frame name=button src= l ></frameset></HTML>

现在假设l即上面的页面有一个button来实现对下面页面的刷新 可以用以下七种语句 哪个好用自己看着办了

语句 window parent frames[ ] location reload()

语句 window parent frames bottom location reload()

语句 window parent frames[ bottom ] location reload()

语句 windem( ) location reload()

语句 windem( bottom ) location reload()

语句 window parent bottom location reload()

语句 window parent[ bottom ] location reload()

解释一下

window指代的是当前页面 例如对于此例它指的是l页面

parent指的是当前页面的父页面 也就是包含它的框架页面 例如对于此例它指的是l

frames是window对象 是一个数组 代表着该框架内所有子页面

em是方法 返回数组里面的元素

如果子页面也是个框架页面 里面还是其它的子页面 那么上面的有些方法可能不行   l源代码 (页面上有七个按钮 功能都是刷新下面的框架页面)

<!DOCTYPE HTML PUBLIC //W C//DTD HTML Transitional//EN ><HTML><HEAD></HEAD><BODY><input type=button value= 刷新 onclick= window parent frames[ ] location reload() ><br><input type=button value= 刷新 onclick= window parent frames bottom location reload() ><br><input type=button value= 刷新 onclick= window parent frames[ bottom ] location reload() ><br><input type=button value= 刷新 onclick= windem( ) location reload() ><br><input type=button value= 刷新 onclick= windem( bottom ) location reload() ><br><input type=button value= 刷新 onclick= window parent bottom location reload() ><br><input type=button value= 刷新 onclick= window parent[ bottom ] location reload() ><br></BODY></HTML>

下面是l页面源代码 为了证明下方页面的确被刷新了 在装载完页面弹出一个对话框

lishixinzhi/Article/program/Java/Javascript/201311/25475