How do I show the result of an account held in an iframe in the original document?

Asked

Viewed 35 times

0

I made an iframe that shows products from another file. html, there is realized a product of product price and the quantity selected with the result of that product showing there same.

However, I would like to take the values of all these results, sum it all up and show the total outside of this iframe, in the original document.

I need this for another project, where I will put new product categories on src'different s of the same iframe, with the total of all in the first document.

Follows the code:

HTML (Page where iframe is)

<body>
<iframe src="outro.html" frameborder="0" width="500px" height="500px"></iframe>
<p>Total: R$<span id="total">0</span></p>
</body>

HTML (Page that is src iframe)

<body>
    <div class="itens">
        <p id="topo">Produto 1</p>
        <p id="tipo">Tipo: <b>Brinquedo</b></p>
        <p id="pre">Preço: <b>R$50</b></p><br>
        <p id="qtd">Quantidade:<br><input type="number" id="qtd" min="0" max="99" value="0" onmouseup="calc(this.value, 'brinquedo', 50)">&nbsp;</p>
        <p id="tot">Total: <br>R$<span id="brinquedo" name="valor">0</span></p>
      </div>
      <div class="itens">
        <p id="topo">Produto 2</p>
        <p id="tipo">Tipo: <b>Brinquedo</b></p>
        <p id="pre">Preço: <b>R$100</b></p><br>
        <p id="qtd">Quantidade:<br><input type="number" id="qtd" min="0" max="99" value="0" onmouseup="calc(this.value, 'brinquedo2', 100)">&nbsp;</p>
        <p id="tot">Total: <br>R$<span id="brinquedo2" name="valor">0</span></p>
      </div>
</body>

Javascript (Function I used pro calculus)

let total = 0;
function calc(q, v, t){
    total = (q * t)
    document.getElementById(v).innerHTML = total;
    calc_total()
}

function calc_total(){
   
    let b1 = parseFloat(document.getElementById('brinquedo').innerHTML);
    let b2 = parseFloat(document.getElementById('brinquedo2').innerHTML);
    
    valTotal = b1 + b2

    document.getElementById('total').innerHTML = valTotal

}

javascript html

  • The calculation is done in the iframe or in the original document?

  • The calculation is done in the iframe

  • Try window.parent.document.getElementById('total').innerHTML = valTotal

1 answer

1


You can use parent to access functions that are on the Iframe parent page. For example:

index.html

<html>
  <head></head>
    <body>
        <iframe src="outro.html" frameborder="0" width="500px" height="500px"></iframe>
        <p>Total: R$<span id="total">0</span></p>

        <script>
            function set_total(valTotal){
                document.getElementById('total').innerHTML = valTotal
            }
        </script>
    </body>
</html>

another html.

<html>
    <head></head>
    <body>
        <div class="itens">
            <p id="topo">Produto 1</p>
            <p id="tipo">Tipo: <b>Brinquedo</b></p>
            <p id="pre">Preço: <b>R$50</b></p><br>
            <p id="qtd">Quantidade:<br><input type="number" id="qtd" min="0" max="99" value="0" onmouseup="calc(this.value, 'brinquedo', 50)">&nbsp;</p>
            <p id="tot">Total: <br>R$<span id="brinquedo" name="valor">0</span></p>
        </div>
        <div class="itens">
            <p id="topo">Produto 2</p>
            <p id="tipo">Tipo: <b>Brinquedo</b></p>
            <p id="pre">Preço: <b>R$100</b></p><br>
            <p id="qtd">Quantidade:<br><input type="number" id="qtd" min="0" max="99" value="0" onmouseup="calc(this.value, 'brinquedo2', 100)">&nbsp;</p>
            <p id="tot">Total: <br>R$<span id="brinquedo2" name="valor">0</span></p>
        </div>

        <script>
            let total = 0;
                function calc(q, v, t){
                    total = (q * t)
                    document.getElementById(v).innerHTML = total;
                    calc_total()
                }
                function calc_total(){
                    let b1 = parseFloat(document.getElementById('brinquedo').innerHTML);
                    let b2 = parseFloat(document.getElementById('brinquedo2').innerHTML);
                    var valTotal = b1 + b2
                    parent.set_total(valTotal); // <- aqui eu chamo a função declarada em index.html, passando o valor total como parâmetro
                }
        </script>
    </body>
</html>

OBSERVING

If you try to run this by placing the file path index.html in Chrome, will go wrong because it will block this action as described here. So you need to test on some server, whether it’s local (like XAMPP, or any other) or even on the web.

  • Thank you very much, friend! It worked very well here. I also had no idea of this lock.

  • Now I’ll test on the actual design to see if glue too.

  • It worked, buddy! Thanks.

Browser other questions tagged javascript html

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