Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing iframe with local files in Chrome
    primarykey
    data
    text
    <p>I am having a tough time figuring out how to access a page loaded in an iframe from the outer page. Both pages are local files, and I'm using Chrome.</p> <p>I have an outer page, and many inner pages. The outer page should always display the page title for the inner page (it makes sense in my application, perhaps less so in this stripped-down example). This works without any problem in AppJS, but I've been requested to make this app work directly in the browser. I'm getting the error "<em>Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.</em>".</p> <p>I think this is due to Chrome's same origin policy regarding local files, but that hasn't helped me fix the problem directly. I can work around the issue in this stripped-down example by using the window.postMessage method per <a href="https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy">Ways to circumvent the same-origin policy</a>. However, going beyond this example, I also want to manipulate the DOM of the inner page from the outer page, since this will make my code much cleaner - so posting messages won't quite do the job.</p> <p>Outer Page</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport"&gt; &lt;/head&gt; &lt;body&gt; This text is in the outer page &lt;iframe src="html/Home.html" seamless id="PageContent_Iframe"&gt;&lt;/iframe&gt; &lt;script src="./js/LoadNewPage.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Inner Page</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title id="Page_Title"&gt;Home&lt;/title&gt; &lt;meta name="viewport"&gt; &lt;/head&gt; &lt;body&gt; This text is in the inner page &lt;/body&gt; &lt;/html&gt; </code></pre> <p>JavaScript</p> <pre><code>var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow; var pageTitleElement = iFrameWindow.$("#Page_Title"); </code></pre> <p>Per <a href="https://stackoverflow.com/questions/10415759/is-it-likely-that-future-releases-of-chrome-support-contentwindow-contentdocumen/15684469#15684469">Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?</a>, I tried launching Chrome with the flag</p> <pre><code>--allow-file-access-from-files </code></pre> <p>But there was no change in the results.</p> <p>Per <a href="https://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy">Disable same origin policy in Chrome</a>, I tried launching Chrome with the flag </p> <pre><code>--disable-web-security </code></pre> <p>But again there was no change in the results.</p> <p>Per <a href="https://stackoverflow.com/questions/1481251/what-does-document-domain-document-domain-do">What does document.domain = document.domain do?</a>, I had both pages run the command</p> <pre><code>document.domain = document.domain; </code></pre> <p>This resulted in the error "<em>Blocked a frame with origin "null" from accessing a frame with origin "null". The frame requesting access set "document.domain" to "", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.</em>"</p> <p>For fun, I had both pages run the command </p> <pre><code>document.domain = "foo.com"; </code></pre> <p>This resulted in the error "<em>Uncaught Error: SecurityError: DOM Exception 18</em>".</p> <p>I'm floundering. Any help from more knowledgeable people would be fantastic! Thanks!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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