How do I modify an iframe through javascript?

Question

How do I modify an iframe through javascript?

Navigation

#1 by (2 votes)

3

The problem is as follows. I have a total of 4 iframes within my website, the only one that moves is the content, the others remain immobile, the one that moves constantly has no problems, the issue changes when one of the other frames should be placed below the content or move aside so that this does not interfere with the principal, because if I leave it like this, I can not click the main because it is placed below it and I tried it as follows:

        <script>

    function ocultar() {
        window.parent.frames[3].document.body.style.display = "none";

    }


    </script>

This function should hide the frame and it does it to a certain extent, since what I hide is what is inside the frame and I do not want that, but that the entire frame of the frame is faded, hidden or moved in some direction that does not bother me, then I leave the how is accommodated my frames

<body onload="ocultar()"   >

    <div >

        <center><label style="font-family: titulo;font-size: 42px;color: red;">Proyecto Hidruth</label></center>
        <center> <div ><iframe name="frame-menu" id="framemenu" src="PHP/menu.php"></iframe></div></center>
        <div ><center><iframe   style="border-width: 0px;background-color: #393030;background-color: #c3b6b6;"  id="informacion2" src="PHP/ayudas/ayuda.inicio.php"></iframe></center></div>
        <div ><center><iframe name="frame-contenido" id="frameinicio" style="z-index: -10000;" src="PHP/inicio.php"></iframe></center></div>
        <div ><center><iframe id="frame-articulo" name="frame-articulo" style="float: right;margin-top: -10%;margin-left: -45%;width:60%;height: 92%;margin-top: -50%;z-index: 1000;position: absolute;"   src="PHP/articulos/inicio_articulos.php"></iframe></center></div>

        <div><center><iframe  style="background-color: orangered;border:0;border-radius: 5px;" id="framepie"  src="PHP/piepagina.php"></iframe></center></div>
    </div> 






</body>

in advance thank you for reading my comment.

Hide code:

        function ocultar() {

document.querySelectorAll ("iframe") 3 .style.display="none";

code to show:

function articulos() {
window.parent.frames[2].location = "articulos.php"
window.parent.frames[1].location = "ayudas/ayuda.articulos.php"
    alert(document.querySelectorAll("iframe")[3]);

document.querySelectorAll("iframe")[3].style.display = "block";


var scary = document.getElementById("scary");
scary.play();

}

When initially loading all the frames if you hide the one I require:

When I click on the menu items should reappear the frame that initially hide it and I get this error

The order of my elements is as follows: In javascript is my file where I do the action of articles and in php I load all my frames and at the same time hide what I do not need initially

javascript html5 php

asked by David 20.07.2016 в 09:25

source

1 answer

Can I use a SQL Server database in my RAILS 4 project on ubuntu? Swift - Pass data between views with custom controls

score 2 · Accepted Answer

You are not applying the style to iframe but to the body of the page within iframe . Then you still have the same problem because the iframe itself is still visible and continues to hinder the time to click.

The solution would be to apply the styles directly to iframe . You can do that in different ways depending on how you have structured the page:

If the iframe has a id then it applies the style directly to the element with that id :

function ocultar() {
    document.getElementById("iframe-a-ocultar").style.display = "none";
}

If the iframe s do not have id and you want to hide the room, you could do something like this:

document.querySelectorAll("iframe")[3].style.display = "none";

or this:

// CUIDADO: los contadores de nth-child empiezan en 1 en lugar de 0 :S
document.querySelector("iframe:nth-child(4)").style.display = "none";

what would leave the function ocultar() like this:

function ocultar() {
    document.querySelectorAll("iframe")[3].style.display = "none";
}