Ich lade eine Aspx-Webseite in einen Iframe. Der Inhalt im Iframe kann höher sein als die Höhe des Iframes. Der Iframe sollte keine Bildlaufleisten haben.
Ich habe ein Wrapper- div
Tag im Iframe, das im Grunde den gesamten Inhalt enthält. Ich habe jQuery geschrieben, um die Größenänderung zu ermöglichen:
$("#TB_window", window.parent.document).height($("body").height() + 50);
Wo
TB_window
ist das Div, in dem das Iframe
enthalten ist?
body
- das Body-Tag des Aspx im Iframe.
Dieses Skript ist an den Iframe-Inhalt angehängt. Ich erhalte das TB_window
Element von der übergeordneten Seite. Dies funktioniert zwar gut in Chrome, aber das TB_window bricht in Firefox zusammen. Ich bin wirklich verwirrt / verloren darüber, warum das passiert.
javascript
jquery
asp.net
iframe
Karry
quelle
quelle
Antworten:
Sie können die Höhe des
IFRAME
Inhalts abrufen, indem Sie Folgendes verwenden:contentWindow.document.body.scrollHeight
Nachdem das
IFRAME
geladen wurde, können Sie die Höhe wie folgt ändern:Dann schließen Sie auf dem
IFRAME
Tag den Handler wie folgt an:Ich hatte vor einiger Zeit eine Situation, in der ich zusätzlich
iframeLoaded
vonIFRAME
selbst anrufen musste, nachdem ein Formular eingereicht wurde. Sie können dies erreichen, indem Sie in denIFRAME
Inhaltsskripten des Skripts Folgendes ausführen:quelle
X-FRAME-OPTIONS
, um eine Zeile hinzuzufügen als:Response.AddHeader("X-FRAME-OPTIONS", "SAMEORIGIN");
oderresponse.addHeader("X-FRAME-OPTIONS", "Allow-From https://some.othersite.com");
iFrameID.height = "";
aufiFrameID.height = "20px";
. Die Standard-Iframe-Höhe des Browsers beträgt 150px, wodurch""
sie zurückgesetzt wird.Eine leicht verbesserte Antwort auf Aristos ...
Dann deklarieren Sie in Ihrem Iframe wie folgt:
Es gibt zwei kleinere Verbesserungen:
iframe.height = ""
wenn Sie es in der nächsten Anweisung neu zuweisen möchten. Dies verursacht tatsächlich einen Overhead, wenn Sie mit einem DOM-Element arbeiten.Bearbeiten: Wenn sich der Inhalt im Frame ständig ändert, rufen Sie auf:
aus dem iframe nach dem Update. Funktioniert für den gleichen Ursprung.
Oder um automatisch zu erkennen:
quelle
function resizeIframe(iframe) { var size=iframe.contentWindow.document.body.scrollHeight; var size_new=size+20; iframe.height = size_new + "px"; }
Ich fand, dass die akzeptierte Antwort nicht ausreichte, da X-FRAME-OPTIONS: Allow-From in Safari oder Chrome nicht unterstützt wird . Ging stattdessen mit einem anderen Ansatz, gefunden in einer Präsentation von Ben Vinegar von Disqus. Die Idee ist, dem übergeordneten Fenster einen Ereignis-Listener hinzuzufügen und dann innerhalb des Iframes mit window.postMessage ein Ereignis an das übergeordnete Fenster zu senden, das ihn auffordert, etwas zu tun (Größe des Iframes ändern).
Fügen Sie im übergeordneten Dokument einen Ereignis-Listener hinzu:
Und schreiben Sie im Iframe eine Funktion, um die Nachricht zu posten:
Fügen Sie schließlich im iframe ein onLoad zum body-Tag hinzu, um die Größenänderungsfunktion auszulösen:
quelle
setInterval(resize, 1000);
Fügen Sie dies dem Iframe hinzu, dies hat bei mir funktioniert:
Und wenn Sie jQuery verwenden, versuchen Sie diesen Code:
quelle
Es gibt vier verschiedene Eigenschaften, mit denen Sie die Höhe des Inhalts in einem iFrame ermitteln können.
Leider können sie alle unterschiedliche Antworten geben und diese sind zwischen den Browsern inkonsistent. Wenn Sie den Körperrand auf 0 setzen,
document.body.offsetHeight
gibt das die beste Antwort. Versuchen Sie diese Funktion, um den richtigen Wert zu erhalten. Dies wird aus der iframe-resizer- Bibliothek entnommen , die auch darauf achtet, dass der iFrame die richtige Größe beibehält, wenn sich der Inhalt ändert oder die Größe des Browsers geändert wird.quelle
Anstatt Javscript / JQuery zu verwenden, fand ich am einfachsten:
Hier ist 1vh = 1% der Browserfensterhöhe. Der theoretische Wert der einzustellenden Höhe ist also 100vh, aber praktisch 98vh hat die Magie bewirkt.
quelle
Andere Antworten haben bei mir nicht funktioniert, deshalb habe ich einige Änderungen vorgenommen. Hoffe das wird helfen
quelle
Nur für den Fall, dass dies jemandem hilft. Ich zog mir die Haare aus, um dies zum Laufen zu bringen, und bemerkte dann, dass der Iframe einen Klasseneintrag mit einer Höhe von 100% hatte. Als ich das entfernte, funktionierte alles wie erwartet. Bitte überprüfen Sie, ob CSS-Konflikte vorliegen.
quelle
Sie können Ihrem resizeIframe auch einen sich wiederholenden requestAnimationFrame hinzufügen (z. B. aus der Antwort von @ BlueFish), der immer aufgerufen wird, bevor der Browser das Layout malt, und Sie können die Höhe des iframes aktualisieren, wenn dessen Inhalt seine Höhe geändert hat. zB Eingabeformulare, träge geladene Inhalte usw.
Ihr Rückruf sollte schnell genug sein, um keinen großen Einfluss auf Ihre Gesamtleistung zu haben
quelle
Uncaught TypeError: Cannot read property 'scrollHeight' of null
dabody
istnull
, aber es funktioniert in der Regel.Sie können sich hier auf eine verwandte Frage beziehen - Wie werden Breite und Höhe des Iframes mit dem übergeordneten Div identisch gemacht?
Dynamische Höhe einstellen -
Und Codes - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
quelle
Ich verwende jQuery und den folgenden Code, der für mich funktioniert.
quelle
Ich fand, dass die Antwort von Troy nicht funktionierte. Dies ist derselbe Code, der für Ajax überarbeitet wurde:
quelle
Um den Fensterblock zu erweitern, der unten abgeschnitten zu sein scheint, insbesondere wenn Sie nicht scrollen, habe ich Folgendes verwendet:
quelle
Dieser ist nützlich, wenn Sie eine Lösung ohne Abfrage benötigen. In diesem Fall sollten Sie versuchen, einen Container hinzuzufügen und ihn in Prozent aufzufüllen
HTML-Beispielcode:
CSS-Beispielcode:
quelle
Die einfache Lösung besteht darin, die Breite und Höhe des Inhaltsbereichs zu messen und diese Messungen dann zur Berechnung des Prozentsatzes der unteren Polsterung zu verwenden.
In diesem Fall betragen die Maße 1680 x 720 px, sodass die Polsterung auf der Unterseite 720/1680 = 0,43 * 100 beträgt, was 43% entspricht.
quelle
Eine leicht verbesserte Antwort auf BlueFish ...
Dies berücksichtigt die Höhe des Windows-Bildschirms (Browser, Telefon), die für reaktionsschnelles Design und Iframes mit großer Höhe geeignet ist. Das Auffüllen stellt das Auffüllen dar, das Sie über und unter dem Iframe wünschen, falls es durch den gesamten Bildschirm geht.
quelle
quelle
Beispiel mit PHP htmlspecialchars () + prüfen, ob Höhe vorhanden ist und> 0 ist:
quelle
Machen Sie einfach die Position des Iframe-Containers: Absolut und Iframe ändern automatisch ihre Höhe entsprechend ihrem Inhalt
quelle
und / oder
Siehe Frage zum Stapelüberlauf. So ermitteln Sie die Höhe eines Körperelements .
Versuchen Sie dies, um die Körpergröße in jQuery zu ermitteln:
Es hat keinen Wert, wenn Firebug . Vielleicht ist das das Problem.
quelle