Ich möchte, dass ein Iframe zunächst srcleer ist und dann, sobald die Seite geladen ist. Rufen Sie eine JS-Funktion auf und setzen Sie den srcWert auf einen tatsächlichen Wert.
Ist also <iframe src="#" />gültig ODER muss ich etwas anderes verwenden, wie javascript:;etc.
srcAttribut Browser standardmäßig weglassen about:blank.
srcFeld leer lassen, wird der Browser es herausfinden. Möglicherweise haben nicht alle Browser eine about:blank.
srcAttribut auf sicheren Seiten weglassen, wird in einigen Versionen von Internet Explorer die berüchtigte Meldung "Diese Seite enthält sowohl sichere als auch unsichere Elemente" ausgelöst.
Antworten:
Der HTML 5-Arbeitsentwurf, Abschnitt 4.8.2 , sagt (Hervorhebung von mir):
Das
srcAttribut gibt die Adresse einer Seite an, die der verschachtelte Browserkontext enthalten soll. Das Attribut muss, falls vorhanden, eine gültige nicht leere URL sein, die möglicherweise von Leerzeichen umgeben ist.
Laut RFC 3986 , muß gültige URLs mit einem beginnen Schema Namen und relative Bezüge nicht nur in einem bestehen Fragmente .
Daher #ist keine gültige URL und sollte nicht als Wert des srcAttributs verwendet werden.
Verwenden Sie stattdessen about: blank .
#ist auch eine ungültige relative Referenz. Antwort entsprechend aktualisiert.
#als src-Wert verwenden, "springt" Chrome die Seite zum Iframe. Stellen Sie sich vor, Sie hätten ein Ankertag <a name="anchor"></a>direkt über Ihrem Iframe. Chrome verhält sich so, als ob Ihre URL wäre mypage.html#anchor.
srcAttribut auch ganz weglassen können ( <iframe></iframe>ohne src=).
Nein, es ist nicht gültig , einen leeren iframe src anzugeben.
Sie sollten verwenden <iframe src="about:blank" />.
#ist als Verweis auf einen Anker innerhalb der aktuellen Seite gedacht (oder wird häufig als Routing-Schema bei der Arbeit mit AJAX-Anforderungen verwendet). Die Verwendung als Quelle für einen Iframe wäre sinnlos, da ein Iframe nicht auf Inhalte auf der aktuellen Seite verweist und nicht für AJAX-Anforderungen verwendet wird.
about:blankist ein browserübergreifender Standard zum Anzeigen eines leeren Dokuments.
Update 8. Juni 2012:
Es scheint, dass die 'lebende' Spezifikation einen Iframe nicht mehr ungültig macht, wenn das srcAttribut fehlt:
Wenn beim Erstellen des Elements das Attribut srcdoc nicht festgelegt wird und das Attribut src entweder ebenfalls nicht festgelegt oder festgelegt wird, sein Wert jedoch nicht aufgelöst werden kann, bleibt der Browserkontext auf der anfänglichen Seite about: blank.
Wenn diese beiden Attribute jedoch nicht festgelegt sind, wird standardmäßig der Browserkontext verwendet about:blank. Um eine ordnungsgemäße Abwärtskompatibilität zu gewährleisten, ist es empfehlenswert, ausführlich zu sein und vorerst die about:blankURL anzugeben.
about:Schema im Jahr 2010 standardisiert .
Es sieht so aus, als könnten Sie den src auch komplett weglassen:
http://dev.w3.org/html5/spec/Overview.html#the-iframe-element
Wenn beim Erstellen des Elements das Attribut srcdoc nicht festgelegt wird und das Attribut src entweder ebenfalls nicht festgelegt oder festgelegt wird, sein Wert jedoch nicht aufgelöst werden kann, bleibt der Browserkontext auf der anfänglichen Seite about: blank.
src=""die zuvor geladene Seite neu geladen wird, wenn Sie die übergeordnete Seite neu laden, was wahrscheinlich nicht das ist, was Sie wollen. about:blankist wahrscheinlich eine bessere Wette.
Wenn Sie nicht wollen , verwenden , about:blankkönnen Sie als verwenden Javascript srcfür iframewie das folgende Beispiel:
<iframe name="TV" id="tv" style="width:100%; background: #800000" src="javascript:document.write('<h3>Results Window</h3>')"></iframe>
Das obige Beispiel initialisiert einen iframemit kastanienbraunem Hintergrund, der eine einfache Meldung enthält <h3>Results Window</h3>. Die Ziele Ihrer Links sollten jedoch dem iframe nameAttribut entsprechen, dh in diesem Beispiel TV.
Einige externe Websites blockieren möglicherweise die Anforderung ihrer Seiten von einem anderen Ursprung. Versuchen Sie, die URLs der Hyperlinks im folgenden Beispiel in yahoo.comoder zu ändern google.com, und überprüfen Sie beispielsweise die Konsole Ihres Browsers.
Sie können about:blankdas srcAttribut verwenden (wie bereits von Ariel erwähnt), da sonst beim Bereitstellen von einer sicheren Seite ein Fehler ausgegeben wird.
Eine sichere Seite httpswürde einen Fehler von möglicherweise unsicheren Daten auf der sicheren Website auslösen.
Sie können versuchen, den Iframe über Javascript hinzuzufügen, damit Sie keinen leeren im HTML-Code benötigen:
(jQuery-Beispiel)
<script type="text/javascript">
$().ready(function() {
$("<iframe />").attr("src", "http://www.bbc.co.uk/").appendTo("body");
});
</script>
Das Hinzufügen des Iframes mit Javascript ermöglicht eine ordnungsgemäße Verschlechterung - Benutzer ohne Javascript sehen keinen leeren Iframe.
Als Teil des Standards für das URI-Schema ist about: blank wahrscheinlich die beste Option, da es eine sehr gute Browserunterstützung bietet.
about: blank Gibt ein leeres HTML-Dokument mit dem Medientyp text / html und der Zeichenkodierung UTF-8 zurück. Dies wird häufig verwendet, um leere Seiten in Browserkontexte zu laden, z. B. Iframes in HTML, die dann durch Skripte geändert werden können. Sie können hier weiter sehen
Für die Aufzeichnung
Nehmen wir das nächste Beispiel an (Firefox 58 ist möglicherweise in allen Browsern vorhanden).
<link href="css.css" rel="stylesheet" type="text/css"/>
<iframe src='about:blank'></iframe>
Iframe wird VOR dem CSS geladen, sodass das Rendern der Seite sichtbar ist, bevor das CSS geladen wird. Dh für den Bruchteil einer Sekunde sieht die Seite ohne CSS aus.
Stattdessen:
<link href="css.css" rel="stylesheet" type="text/css"/>
<iframe src='blank.html'></iframe>
Es funktioniert gut, das CSS wird geladen und der Iframe wird schließlich geladen.
about:blanküberall.