Question

我想通过单击div中的关闭按钮来关闭主div。我需要在iframe中编写哪些JavaScript代码来实现它？

主页： -

<html>
<head>
<script type="text/javascript">
 function showhide()
 {
       var div = document.getElementById("newpost");
if (div.style.display !== "none") {
    div.style.display = "none";
}
else {
    div.style.display = "block";
}
 }
</script>
<style>
#newpost {
z-index: 1;
display:none;
background-color: rgba(255,255,255,0.9);
position:fixed;
width:100%;
height:100%;
overflow:auto;
}
#myframe {
z-index: 2;
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="newpost" id="newpost">
<div class="myframe" id="myframe"><iframe id="signup_frame1" width="750" height="420" src="iframe.html" frameborder="0" allowfullscreen></iframe></div>
</div>
<FONT COLOR="#696969" onclick="showhide()"><span style="cursor:pointer">Show div</span></font>
</body>
</html>

iframe.html： -

<html>
<head>
<script type="text/javascript">
 function showhide()
 {
       var div = document.getElementById("newpost");
if (div.style.display !== "none") {
    div.style.display = "none";
}
else {
    div.style.display = "block";
}
 }
</script>
</head>
<body>
<FONT COLOR="#696969" onclick="showhide()"><span style="cursor:pointer">Close div</span></font>
</body>
</html>

Answer 1

由于您的iFrame位于同一个域中，因此有一种方法可以执行此操作。例如，

<div id="close">
    <iframe src="/HTMLPage2.htm">
    </iframe>
</div>

然后在iFrame里面这样的东西可以解决这个问题：

<script>
    function closeDiv() {
        window.parent.document.getElementById("close").style.display = "none";
    }
</script>
<input value="close div" type="button" onclick="closeDiv()"/>

具体到iFRAME中的代码，需要改为：

    function showhide() {
        var div = window.parent.document.getElementById("newpost");
        if (div.style.display !== "none") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }

所有的说法和完成，你的代码应该是这样的：

主页 -

<html>
<head>
    <script type="text/javascript">
        function showhide() {
            var div = document.getElementById("newpost");
            if (div.style.display !== "none") {
                div.style.display = "none";
            }
            else {
                div.style.display = "block";
            }
        }
    </script>
    <style>
        #newpost
        {
            z-index: 1;
            background-color: rgba(255,255,255,0.9);
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        #myframe
        {
            z-index: 2;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="newpost" id="newpost">
        <div class="myframe" id="myframe">
            <iframe id="signup_frame1" width="750" height="420" src="/iframe.htm" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
    <font color="#696969" onclick="showhide()"><span style="cursor: pointer">Show div</span></font>
</body>
</html>

iframe -

<html>
<head>
<script type="text/javascript">
    function showhide() {
        var div = window.parent.document.getElementById("newpost");
        if (div.style.display !== "none") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }
</script>
</head>
<body>
<FONT COLOR="#696969" onclick="showhide()"><span style="cursor:pointer">Close div</span></font>
</body>
</html>

Answer 2

如果你可以使用jQuery：

$('#signup_frame1').load(function(){

    var iframe = $('#signup_frame1').contents();

    iframe.find("#Close_btn_ID").click(function(){
           $("#myframe").hide();
    });
});

此处， ＆＃34;＃Closebtn_ID＆＃34; 将是iFrame中要附加点击处理程序的按钮的ID。

单击div内的按钮关闭div

2 个答案: