javascripthtmllocal-storagecross-origin-read-blocking

how can the parent .addEventListener listen from an iframe

I have three files, count.html, iframe.html, and script.js

count.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script defer src="script.js"></script>
    </head>
    <body>

    <h5>Right Answers:</h5><p id="outputright"> </p>
    <h5>Wrong Answers:</h5><p id="outputwrong"> </p>
    
    <button id="refresh">Refresh</button>
        
    <p><iframe id="iframe" src="iframe.html" height="300" width="300" ></iframe></p>
    
    </body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- MY Script JS -->
        <script defer>
        // Default Variables
        let r = 0;
        let w = 0;
    
        //update variables in parent
        function right() {
            r++;
            window.parent.updateValueRight(r);
        }
        function wrong() {
            w++;
            window.parent.updateValueRight(w);
        }
        </script>
    </head>
    <body>

    <p>Are you cool?</p>
    <button id="right" onclick="right()">Yes</button>
    <button id="wrong" onclick="wrong()">No</button>
    <button class="btn">Maybe</button>
    
    </body>
</html>

script.js

window.addEventListener('DOMContentLoaded', () => { // when page elements are available
    // Default Variables
    let rtemp = 0;
    let wtemp = 0;
    
    // for iframe to assign values here
    function updateValueRight(plusR) {
      document.getElementById("rtemp").value = plusR;
      }
    function updateValueWrong(plusW) {
      document.getElementById("wtemp").value = plusW;
      }
        
    // print default count in main count page
    document.getElementById("outputright").innerText = rtemp;
    document.getElementById("outputwrong").innerText = wtemp;
        
    /* for button click */
    const refresh = document.getElementById("refresh");

    
    /* refresh values on click */
      refresh.addEventListener("click", function() {
        document.getElementById("outputright").innerText = rtemp;
        document.getElementById("outputwrong").innerText = wtemp;
      });
      
    });

Im receiving the error:

Uncaught DOMException: Failed to read a named property 'updateValueRight' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
    at right (file:// *LOCATION*)
    at HTMLButtonElement.onclick (file:// *LOCATION*)

They are both connected to the same script.js so I thought they would "add" in value and display with outputright and outputwrong in the count.html but it turns out it treats the script as if it is two different scripts exclusively for themselves

I have tried reading this and implementing it in my problem, but I think I misunderstood it.

How do I make this add to the temp variables and display in count.html? I thought window.parent would communicate to count.html

Many questions like this are answered simply by avoiding Cross-origin request and hosting but I run this locally through my browser. I found this but it no longer applies that Firefox could allow this unless I downgrade versions.

Solution

  • First of all, you should open your HTML page in a server and not open a file directly. You can use a VSCode extension named Live Server.

    Then you have some mistakes in you script.js. Where are rtemp and wtemp elements? Can you set their values?

    Finally updateValueRight and updateValueWrong function should be global of window object.

    The right code eg reference :

    window.addEventListener('DOMContentLoaded', () => {
  // when page elements are available
  // Default Variables
  let rtemp = 0;
  let wtemp = 0;

  const rightEl = document.getElementById('outputright');
  const wrongEl = document.getElementById('outputright');

  // for iframe to assign values here
  window.updateValueRight = function (plusR) {
    rightEl.innerText = plusR;
  };
  window.updateValueWrong = function (plusW) {
    wrongEl.innerText = plusW;
  };

  // print default count in main count page
  rightEl.innerText = rtemp;
  wrongEl.innerText = wtemp;

  /* for button click */
  const refresh = document.getElementById('refresh');

  /* refresh values on click */
  refresh.addEventListener('click', function () {
    rightEl.innerText = rtemp;
    wrongEl.innerText = wtemp;
  });
});