Question

我有两个名为main_page.html和dialog_box.html的文件（请参阅下面的代码）。我希望我的handleCloseDialogButton()到＆＃34;关闭对话框＆＃34;，换句话说，重新加载main_page.html，theFrame.style.display重置为＆＃34;无＆＃34;。我怎样才能做到这一点？我应该使用window.open("main_page.html")还是window.location.href="main_page.html"还是别的？注意：我不想使用Javascript的alert()函数，因为它的功能不足以满足我的需要。

main_page.html的内容：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleDialogButton()
{
var theFrame=document.getElementById("myDialogBox");
theFrame.style.display="block";
theFrame;
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. This is the main page.</h2></div>
<iframe  id="myDialogBox" src="./dialog_box.html" style="display:none"> </iframe>
<input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box" 
onClick="javascript:handleDialogButton();" /> 
</body>
</html>

dialog_box.html的内容：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleCloseDialogButton()
{

}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. I am the dialog box.</h2></div>
<input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box" 
onClick="javascript:handleCloseDialogButton();" /> 
</body>
</html>

Answer 1

您可以使用window.parent从iframe访问父元素。有关详细信息，请参阅window.parent。

使用window.parent，您可以调用parent js函数，也可以访问父元素。在您的情况下访问父元素应如下所示：window.parent.document.getElementById（'myDialogBox'）;

在handleCloseDialogButton函数中使用它并将其显示设置为none：

function handleCloseDialogButton()
{
window.parent.document.getElementById('myDialogBox').style.display="none";
}

注意：这不适用于Chrome中的文件模式。您必须将您的网页放在网络服务器上，而且它也可以在Chrome浏览器中使用。

从iFrame中的按钮关闭（对话框）iFrame

1 个答案: