IFrame Frame Adaptive height uncanght securityerror:blocked A frame with origin ' null ' from accessing a frame ....

Contact/edit.html from the CRM project

First, the background is this

Recently in the front-end of the CRM system page, there is a page, click "View all Information" will pop up, the popup is also paged navigation, paging is not using AJAX asynchronous refresh request write, but by refreshing the page. Because the entire site paging is the use of this method, it is not possible to let back-end colleagues with Ajax rewrite a page, so, think of using the IFRAME framework, the pop-up window is written in an HTML file, in the IFRAME to complete. Everything is perfect's idea.

Second, the problem comes! Solve the problem

At this time is not only not highly adaptive and also reported wrong, in fact, this report is the wrong domain is empty, because I did not put in the same domain to run the code.

The workaround is to put these pages under the Apache server, which means that they have a domain and are in the same domain.

OK, now is the code does not error, we just need to use JS to get a bit of this div height is good.

/*Contact Person*/(function(){    varContact ={reinitiframe:function(){            variframe = document.getElementById ("Iframe-div"); Try{                varBheight =Iframe.contentWindow.document.body.scrollHeight; varDheight =Iframe.contentWindow.document.documentElement.scrollHeight; varHeight =Math.max (Bheight, dheight); Iframe.height=height; }Catch(ex) {}//Window.setinterval ("Reinitiframe ()", 200); function call moved to page        }    }; Window.contact=Contact ;}) ()

I'm used to keeping the method in an object so that it's easier to maintain.

now the method to get the height is written, and then the method is called in the page .

<script type= "Text/javascript" src= ". /.. /.. /resource/js/crm.js "></script>    <script>    /  iframe Adaptive height      $ (  function() {        window.setinterval ("Contact.reinitiframe ()", +);      });     </script>

Everything is ready, we execute the code on the local server. 1:

We open it directly with the browser, 2:

!! If someone is also using an IFRAME nested in the method, the content height of the page is no longer self-adaptive, at this time to calculate the height of the div is correct, then it is possible that the page method is not the same domain to execute , so the solution is to put the server down to execute. If you are using a browser to open directly, then you may be using the file protocol , so it will cause the browser error, said domain is empty. Next time you make a mistake, try putting it on the server and doing it. Can be directly next Wamp installation package, the page code to throw in the execution.

Three, the study of

1, error should be good at the error information to find out the problem lies . I did not think at the beginning of the file is not in the same domain problem, always thought it was me js get content height error, so always in this JS function to find errors, and then seriously read the error message, just know that the original is not in the same domain. Playing face ~

2, the use of the IFRAME to nest pages, although the network of various criticisms of the IFRAME framework implementation of low efficiency and so on, but can solve the problem is good bar.

IFrame Frame Adaptive height uncanght securityerror:blocked A frame with origin ' null ' from accessing a frame ....