Wie erzwinge ich eine Iframe-Größe programmgesteuert?

Question

Ich mache eine Seite Builder Art Sache. Für die normale Ansicht muss der iFrame entsprechend angepasst werden, für mobile/Tablet-Ansichten muss er jedoch eine bestimmte Größe haben.

mit iframe-Resizer https://github.com/davidjbradshaw/iframe-resizer von @ david-bradshaw

Elternfenster:

<script type="text/javascript" src="javascript/iframeResizer.min.js"></script> 
.... 
$("iframe")[0].iFrameResize({ 
    checkOrigin: false, 
    enablePublicMethods  : true, 
    heightCalculationMethod: "bodyScroll", 
}); 
.... 

Die Sicht Größe Wechsler tut dies:

// set the iframes width and height "before" iframeresizer does stuff to make it look seemless  
_this.editor.css({ 
    "width":mapper[size].width, 
    "height":mapper[size].height 
}) 

Nur Weg sah ich den .Size () Arbeit ist von der iframe selbst

// fire off a sendMessage cause only way i saw .size() working is from the iframe itself 
_this.editor[0].iFrameResizer.sendMessage({ 
    "width":mapper[size].width, 
    "height":mapper[size].height, 
    "forceSize":true 
}); 

iframe Fenster

<script> 
    var iFrameResizer = { 
     messageCallback: function(message){ 
      console.log("messageCallback") 
      console.log(message) 
      if (message.forceSize==true){ 
       console.log(window.parentIFrame) 
       window.parentIFrame.autoResize(false); 
       window.parentIFrame.size(message.height); // Set height to 100px 
      } else { 
       // apply auto resizing again 
      } 

     } 
    } 
</script> 
<script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"></script> 

Ich war für einen einfacheren Weg der Hoffnung, wie auf Eltern disableIframeResizer() oder etwas, oder in der Lage .Size() von den Eltern zu setzen, da das ist, wo die Ihre Sicht Teile wählen live.I kann nicht scheinen es herauszufinden :(

Mein Problem ist: Ich muss irgendwie den Iframe nicht seine Größenänderung tun, wenn forceSize = wahr und dann, wenn die Nachricht kommt dann die Größe entsprechend ändern.

Danke für eine ziemlich anständige Bibliothek tho!

Answer 1

Ich glaube nicht, dass ich Ihre Frage 100% verstehe. Aber ich habe versucht, deine Frage so gut wie möglich zu beantworten.

Sie können die Größe eines Iframes wirklich einfach in HTML einstellen. Sie können es auch mit Hilfe von CSS tun.

Sie könnten dies tun: <iframe href="https://google.com" width="100%" height="100%">Your Browser Does Not Support Iframe</iframe>.

Sie könnten setzen auch den genauen Durchmesser wie folgt aus: <iframe href="https://google.com" width="300px" height="100px">Your Browser Does Not Support Iframe</iframe>

Sie auch PHP den Durchmesser davon ändern automatisch nutzen könnten.