【HTML】iframe cross-domain access problem_html/css_WEB-ITnose

Overview

The same browser locally accesses local HTML files and accesses server-side HTML files. The local Iframe does not have adaptive height, but the server-side Ifrane has adaptive height.

1. Problem recurrence:

Chrome version 41.0.2272.101 (64-bit)

OS:Win8.1

Chrome access server-side HTML The result of file rendering

The result of Chrome accessing local HTML file

The local accessed HTML file Iframe has no basis The page content in the Iframe has adaptive height

2. Iframe adaptive height code

Add the Iframe page in the middle of the index.html file. When the page is loaded, load The file path specified by src

<iframe id="indexFrame" name="index" width="800" onload='iFrameHeight("indexFrame")' src="Web/Index/indexIframe.html"           frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

JS script adaptively adjusts the Iframe height

    </script>    <script type="text/javascript" language="javascript">        function iFrameHeight(id) {            var ifm = document.getElementById(id);            var subWeb = document.frames ? document.frames[id].document : ifm.contentDocument;            if (ifm != null && subWeb != null) {                ifm.height = subWeb.body.scrollHeight;            }        }    </script>

3. Debugging code

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

Here, I guess that accessing local files is the file protocol (file:///), HTML code and JS code There is a cross-domain issue. I'm not familiar with the file protocol, so please give me some advice.