Change FATHER div inside a Child frame

Asked

Viewed 166 times

0

I’ll try to improve the doubt.

I have a main.html page that looks like this:

<html>
<body>
    <div id='divPai'>Sou a div PAI!</div>
    <frame id='framePai' src='filho.html'></iframe>
</body>
</html>

On the page son.html would like something like this:

<html>
<body>
    <button onclick='alteraPai()'>Alterar DIV Pai</button>

    <script>
        function alteraPai() {
            deAlgumaFormaPaginaPai.divPai.innerHTML = "Mudei!";
            // ou
            $("#deAlgumaFormaTambem").html("Mudei!");
    </script>
</body>
</html>

I hope that’s clearer. Thank you guys!!

javascript jquery

  • Hi Wesley! Can you give an example of HTML and Javascript that does not work? So we can see and help in what is missing.

  • Hi Sergio! Boy I’ve tried everything but I can’t change an element of the main page from inside the iframe.

  • What I want is for you to put the HTML that you can’t get to work

  • See if it helps Sergio. Thanks maninhooo!!

1 answer

0

You can access the parent of the page within the iframe with window.parent.document. Notice also that you have frame instead of iframe.

You can do it like this: (Note the jsFiddle examples)

On the page Father:

<div id='divPai'>Sou a div PAI!</div>
<iframe id='framePai' src='/5kfvndmz/show'></iframe>

(jsFiddle)

On the son.html page

<button onclick='alteraPai()'>Alterar DIV Pai</button>

<script>
function alteraPai() {
    const parentDocument =  window.parent.document;
        const divPai = parentDocument.getElementById('divPai');
        divPai.innerHTML = "Mudei!";
}
</script>

(jsFiddle)

Browser other questions tagged javascript jquery

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