如果由OnClick加载iframe，则自动调整iframe不起作用

Question

I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.

But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.

Auto Resize But it turned out to not work.

Load Iframe code:

<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>

<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>

Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..

EDIT

The following code snippet Resize My

Stored at sites that are loaded:

<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
    var iFrameResizer = {
        messageCallback: function(message){
        }
    }
</script>

Stored at the site containing the iframe:

<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
    iFrameResize({
        log                     : true,
        enablePublicMethods     : true,
        enableInPageLinks       : true,
    });
</script>

Answer 1

UPDATE

What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (ie in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).

I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:

Parent Page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});

Child Page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>

MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY

PLUNKER

---

OLD

---

Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?

SNIPPET

 <script> function okeBos() { document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>'; document.getElementById("starApps").style.display="none"; }; </script> <div id="iframeControl"></div> <div id="starApps"> <span onclick="okeBos()">Load Iframe</span> </div>