Remove CSS within iframe

Asked

Viewed 693 times

1

Hello, I have a page and I am displaying it in an iframe, I want to create as if it were a version 2 of the page with another style, for that I want to remove the css from it and add another one without having to edit in the style.css file, because I also want to keep the v1 page with the same style. Help me, it’s in the same realm.

php javascript html css website

  • You can create another css just for the other page.

  • You’re missing the point, I want to edit what’s inside the iframe and save the other page, plus I want to remove some Divs

  • You want to change styles and manipulate elements.

  • Yes, I want to edit the styles and remove a div called top, where is the menu and the search bar

  • I posted an answer with the necessary code for this. This div "top" has id?

  • It is without id unfortunately

  • All right, it doesn’t need to have id, but it has to have some reference.

  • Just missing a small correction in the code, which I will update now.

  • Has the name that is top

Show 4 more comments

1 answer

0


You can access the elements of iframe using, for example, the id of iframe:

<iframe id="frame" width="500" height="200" src="pagina.php"></iframe>

<script>
    var iFrame = document.body.querySelector("#frame");

    iFrame.onload = function(){ // aguarda o iframe ser carregado
        // altera a cor do texto da #div1 dentro do iframe
        iFrame.contentWindow.document.querySelector("#div1").style.color = "red";
    }
</script>

Using iFrame.contentWindow you can access the elements with querySelector or another way to select elements you want.

Browser other questions tagged php javascript html css website

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