js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

JS中页面的重新加载

在JS中，我们经常需要在不刷新整个页面的情况下重新加载部分内容，下面将介绍如何在JS中实现当前页面和上级页面的重新加载。

当前页面的重新加载

要实现当前页面的重新加载，可以使用如下代码：

location.reload();

这样，当前页面的内容就会被重新加载，相当于用户点击了浏览器的刷新按钮。

上级页面的重新加载

要实现上级页面的重新加载，可以使用如下代码：

window.opener.location.reload();

这样，上级页面的内容就会被重新加载，相当于用户在上级页面点击了浏览器的刷新按钮。

frame或iframe元素引用介绍

在HTML中，我们可以使用frame或iframe标签来引用其他网页的内容，这些标签一般用于构建页面框架或者嵌入其他网页的内容。下面将介绍在JS中如何引用frame或iframe元素。

引用frame元素

要引用frame元素，首先需要给frame元素设置一个ID，例如：

<frame src="frame1.html" id="myframe">

然后在JS中，可以使用如下代码来引用这个frame元素：

var myframe = window.frames["myframe"];

这样，就可以通过myframe变量来操作frame元素了。

引用iframe元素

要引用iframe元素，同样需要给iframe元素设置一个ID，例如：

<iframe src="iframe1.html" id="myiframe"></iframe>

然后在JS中，可以使用如下代码来引用这个iframe元素：

var myiframe = document.getElementById("myiframe").contentWindow;

需要注意的是，与frame不同的是，在引用iframe元素的时候，还需要使用contentWindow属性来获取实际的窗口对象。

示例说明

下面给出两个示例说明，以帮助理解上述内容。

示例1：在当前页面中重新加载部分内容

HTML代码：

<div id="mydiv">
    <p>原始内容</p>
</div>
<button onclick="reloadMyDiv()">重新加载</button>

JS代码：

function reloadMyDiv() {
    // 修改div内容
    var div = document.getElementById("mydiv");
    div.innerHTML = "<p>重新加载后的内容</p>";

    // 重新加载整个div
    div.parentNode.replaceChild(div.cloneNode(true), div);
}

当用户点击按钮时，JS会修改div的内容并重新加载整个div，从而实现部分内容的重新加载。

示例2：在上级页面中重新加载

HTML代码：

<a href="javascript:void(0)" onclick="reloadParentPage()">重新加载上级页面</a>

JS代码：

function reloadParentPage() {
    window.opener.location.reload();
}

当用户在一个子窗口中点击这个链接时，JS会调用reloadParentPage()函数，从而实现重新加载上级页面。