Javascript 通过单击div内的按钮关闭div_Javascript_Html_Iframe

Javascript 通过单击div内的按钮关闭div

javascript html iframe

Javascript 通过单击div内的按钮关闭div,javascript,html,iframe,Javascript,Html,Iframe,我想通过单击该div内的close按钮来关闭主div。我需要在iframe中编写什么JavaScript代码来实现它主页：- <html> <head> <script type="text/javascript"> function showhide() { var div = document.getElementById("newpost"); if (div.style.display !== "none") { div.

我想通过单击该div内的close按钮来关闭主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>

因为您的iFrame位于同一个域上，所以有一种方法可以做到这一点。比如说,

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

不管怎么说，你的代码应该是这样的：

主页-

<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>

如果可以使用jQuery：

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

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

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

在这里，Closebtn_ID将是iFrame中要附加单击处理程序的按钮的ID。

在iFrame:var div=parent.document.getElementByIdnewpost或更好的：parent.showHid中，作为旁注，您确实不应该使用字体标记，使用CSS与语义HTML相结合的样式…关于你的陈述，Iframe是邪恶的，你应该总是避免它们-这是相当误导的。有些情况下您永远不想使用iframe，有些情况下您几乎总是想使用iframe。即使OP不应该在他的特定代码中使用iframe，这也不会让它们变得邪恶。@MaximillianLaumeister我恭敬地、全心全意地不同意。iFrame会导致各种各样的问题—特别是在移动设备上的样式问题、用于web跟踪的重复标记的意外包含，以及性能问题，因为它们会延长加载时间，这在慢速移动或农村宽带连接上浏览时尤为重要。如果我有自己的网络开发公司，我会直接禁止使用标签。谢谢@JoshuaDannemann，但它对我不起作用，你能在你的电脑上用我的代码试试吗？@Plasha肯定还有别的事情，我发布的代码很好，但我会按你的要求核对。@JoshuaDannemann我尊重并反驳不同意。Facebook、Twitter、YouTube等使用iFrame作为嵌入代码是有原因的——也就是说，iFrame外部的任何东西都不会意外地弄乱iFrame内部的内容，因此嵌入的代码始终具有一致的外观。在我看来，iFrame几乎就像一个HTML5，相当于一个Flash小程序——当一个特定的内容块从逻辑上与它的页面分离时，iFrame就存在了，并且应该被隔离。我建议OP自己多读一些关于iFrames的文章，形成自己的观点。谢谢@mechanicals，但在我的大学里，老师没有教我们如何使用jquery，我需要包括谷歌的jquery文件吗。这个链接应该可以帮助您包含jquery。这只是一个用javascript编写的库。使用jquery来实现这一点是非常过分的，因此这将是一个糟糕的做法。“如果你这样做，而我是老师，你就不会得到很好的分数。”劳伦斯说。哈哈，但我想学Jquery，也许一年后老师会教我们：我想从外面学到更多，我会努力从别人那里学到更多w3school@Plasha你应该听劳伦斯的。Jquery在很多方面都很有用，但现在它变得如此普遍，以至于许多开发人员开始懒散地使用它，并且似乎忘记了纯JavaScript可以做Jquery可以做的任何事情。首先学习使用JavaScript对您有好处，然后在代码更少的情况下，坚持使用Jquery。

<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>

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

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

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