Note that there are some explanatory texts on larger screens.

plurals
  1. POChange iframe source from another iframe
    text
    copied!<p>Ok, I have 2 iframes inside a parent page (for whatever reason).</p> <p>I have a navigation menu on parent page, which changes the source of iframe #1... </p> <p>iFrame #1's job, is to display ANOTHER navigation menu... Like a subnavigation menu...</p> <p>Now, how can I upon clicking an li inside iFrame #1, change the source of iframe #2? They're both on the same parent page...</p> <p>Aside from failing miserably, I also get a warning from Chrome's Dev tools - </p> <p>Unsafe JavaScript attempt to access frame with URL file:///C:/website/index.html from frame with URL file:///C:/website/news/navigator.html. Domains, protocols and ports must match.</p> <p>Here's some code to make things slightly clearer:</p> <p>The HTML</p> <pre><code>&lt;!-- HTML for the parent page itself --&gt; &lt;iframe id="frameone" src=""&gt;&lt;/iframe&gt; &lt;iframe id="frametwo" src=""&gt;&lt;/iframe&gt; &lt;button onclick="onenav('test.html')"&gt;Change 1st frame&lt;/button&gt; &lt;!-- The following is the HTML that is loaded inside "frameone" --&gt; &lt;button onclick="twonav('test2.html')"&gt;Change 2nd frame&lt;/button&gt; // Javascript var one = document.getElementById('frameone'); var two = document.getElementById('frametwo'); function onenav(x){ one.src = x; } function twonav(y){ two.src = y; } </code></pre> <p>To me, this makes sense, since this is all being executed on the parent page... On loading, I query the dev tools and I can see that both, 'one' and 'two' have frame elements... The first button works, the second one, doesn't... </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload