0

I have two frames, named mybinf and mymainf, that loads x.html and b.html, respectively. In x.html I have this javascript code to load a video into mymainf. The javascript works in Firefox and does not in Google chrome. The latter causes the exception, "Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame" at the line "var mframe = ...". How to fix this or how to write code that is cross browser compatible?

<div id="mysidenav" class="sidenav">
  <div id="myinterface" class="interface">
    <div id="mybind" class="bindiv">
        <iframe id="mybinf" class="BinFrame" src="html/x.html" frameborder="no"></iframe>
    </div>
  </div>
</div>
<div id="mymain" class="main">
  <iframe id="mymainf" class="MainFrame" src="html/b.html" scrolling="no"></iframe>
</div>

In x.html:
function loadbinquest() {
  var site = "images/next.png";
  var mframe = parent.frames['mymainf'];
  mframe.src=site;
}
Umesh Rao
  • 1
  • 1
  • 3

1 Answers1

0

This is a duplicate of SecurityError: Blocked a frame with origin from accessing a cross-origin frame

You're loading an iframe with a different origin. As Geert's answer of the linked question mentions,

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

His answer also suggests some workarounds.

Trevor van Leeuwen
  • 1
  • 2
  • Thanks, Trevor. I changed the code to load a local image, next.png (and updated the question above). The behavior is the same. Firefox loads, Google Chrome shows the DOMexception. In general, how to write code that is cross browser compatible? – Umesh Rao Dec 25 '18 at 23:29