[HTML] iframe cross-origin access problem, htmliframe cross-Origin

[HTML] iframe cross-origin access problem, htmliframe cross-Origin
Overview

The local browser accesses the local HTML file and the server-side HTML file. The local Iframe does not have an adaptive height, while the server-side ifenders are adaptive to the height.

1. Problem reproduction:

Chrome 41.0.2272.101 (64-bit)

OS: Win8.1

Result of Chrome accessing the HTML file on the server

 

Result of Chrome accessing the local HTML file

The Iframe of the locally accessed HTML file is not adaptive to the page class in the Iframe.

 

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 adaptive Iframe Height Adjustment

    </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. debug the 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 the file protocol (file: //) is used to access the local file. Cross-origin problems exist between HTML code and JS Code. The younger brother is not familiar with the file protocol. Please kindly advise.