Ist ein leerer iframe src gültig?

73

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.

javascript html css iframe testndtv
quelle
1
Ich sehe about:blanküberall.
Pimvdb
1
Ich glaube, wenn Sie das srcAttribut Browser standardmäßig weglassen about:blank.
Jim Blackler
Wenn Sie das srcFeld leer lassen, wird der Browser es herausfinden. Möglicherweise haben nicht alle Browser eine about:blank.
Rudie
1
@Jim: Wenn Sie das 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.
Frédéric Hamidi
1
Ich habe gerade herausgefunden, dass jQuery das document ready-Ereignis aufgrund des # als src zweimal auslösen wird. Ich habe eine ganze Weile
gebraucht

Antworten:

107

gerade <iframe src='about:blank'></iframe>

Ariel
quelle
5
Funktioniert src = 'about: blank' in allen
gängigen
5
Der IE 9 sendet eine Anfrage an den Server mit dem Pfad "null" mit src = "about: blank" :(
powtac
@powtac Macht es dasselbe mit src = ""?
NoBugs
51

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 .

Frédéric Hamidi
quelle
5
Nein, die gültige nicht leere URL muss eine gültige URI- Referenz sein, wie in Abschnitt 4.1 von RFC3986 definiert, nicht unbedingt eine gültige URI. Andernfalls könnten Sie keine relative URL als iframe src verwenden, was eindeutig Unsinn ist.
mrec
@ Mike, du hast recht und #ist auch eine ungültige relative Referenz. Antwort entsprechend aktualisiert.
Frédéric Hamidi
Ist ein Javascript: URI gültig? So: stackoverflow.com/q/1689215/328397
goodguys_activate
Wenn Sie #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.
Howcheng
Das "falls vorhanden" deutet darauf hin, dass Sie das srcAttribut auch ganz weglassen können ( <iframe></iframe>ohne src=).
ShreevatsaR
24

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.

Aron Rotteveel
quelle
1
Für diejenigen, die eine vollständige Referenz oder einen "Beweis" suchen, wurde das about:Schema im Jahr 2010 standardisiert .
mindplay.dk
10

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.

rjmunro
quelle
1
Ein Ärger, der Sie dort hinauf stolpern könnte, ist in Chrome, wo 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.
mindplay.dk
2

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.

Beachten:

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.

Jsbin Beispiel

SaidbakR
quelle
1

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.

Naveed Butt
quelle
1

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.

whostolemyhat
quelle
1

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

Selay
quelle
0

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.

Magallane
quelle