How to hide iframe from JS?

Asked

Viewed 313 times

0

I have this code below that when clicked on the action, opens a box on the same page. It works. But when I click the x, the box closes, but the iframe does not. I would like to only show the box without iframe or show iframe, but at the same time x is clicked, close both. It is possible? 

<head>
    <style>
        ul{margin: 0px; padding: 0px; list-style: none;}
        ul li{position: relative; display: inline-block;}
        li ul{position: absolute; top: +33px; display: none;}
        ul li a{display: block; padding: 7px; padding-left: 15px; padding-right: 15px; border: 1px solid #CCCCCC;   font-size: 15px; margin-top: -4px; text-shadow: #000000 0px 0px 0px;}
        li:hover ul{ display: inline-grid;}
        #floatleft{float: left; margin: -7px 8px 0px -8px;}
    </style>
</head>
<body>  
    <div id="janela" style="display: none; position: absolute;"><iframe id="iframejanela" name="iframejanela"></iframe></div>
    <nav id="menu">
        <ul><li id="floatleft" class="noclick"><a>Passe o mouse</a> 
        <ul id="width_cem"> <li><a href="#" id="padding" onClick="javascript: abrir(1);">Ação</a></li>
        </ul></li></ul>         
    </nav>
</body>

<script>
function abrir(qm){
    document.getElementById('janela').style.display='';
    if(qm == 1){window.open('iframe2.php', "iframejanela");}
}
</script>

And this is what I wanted to open

<head>
    <style>
        .alert{padding: 20px; background-color: #EDEDED; color: #000000; cursor: default; width: 100px; height: 100px;}
        .closebtn{margin-left: 15px; color: #000000; float: right; font-size: 22px; line-height: 20px; cursor: pointer;}
    </style>
</head>
<body>
    <div class="alert">
        <span class="closebtn" 
        onClick="this.parentElement.style.display='none';">&times;</span>
            Ação
    </div>
</body>
javascript html iframe

  • First that this.parentElement of the element span will be the element div.alert, so only it is hidden. I am still searching if it is possible to search for the reference of the iframe within it.

1 answer

0


First, only the div.alert is hidden because the this.parentElement refers to this element only, since only the first parent element is searched for. To hide the element iframe, you need to do:

onclick="window.frameElement.parentElement.style.display='none';"

For window.frameElement shall refer to the iframe where the page is displayed and therefore, window.frameElement.parentElement shall refer to the div#janela.

See working here.

  • Thanks, another question, is appearing only once, for example, if you try to click the action appears normally, but closing and opening again does not result in anything, what could be done?

  • @Mrvandaime corrected the answer. I had hidden the element iframe, while it should be concealed from div #janela. The only change was to add .parentElement after window.frameElement.

  • Yeah, make this modification that I made that will work as expected.

  • Okay, thanks again, just this for now.

  • You can accept the answer by clicking on ✔ on the left side of it.

Browser other questions tagged javascript html iframe

You are not signed in. Login or sign up in order to post.