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

Source: Internet
Author: User

[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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.