jQuery Force setzt das src-Attribut für iframe

83

Ich habe eine Hauptseite (eigentlich eine JSP) mit einem Iframe als;

<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>

Jetzt gibt es auf der Hauptseite mehrere Links (dynamisch über JSP gerendert), die versuchen können, den src auf eine URL zu setzen ...

Meine Frage ist nun, ob ich mit jQuery (möglicherweise live ()) überschreiben kann, dass das Attribut "src" für abc_frame immer einen bestimmten Wert hat (z. B. "somefixedURL").

Ich kann das Klicken auf den Link nicht erfassen, da er vollständig dynamisch über Java-Code erstellt wird und ich daher versuche, den iframe src zu überschreiben.

javascript jquery dom testndtv
quelle

Antworten:

166

Verwenden Sie attr

$('#abc_frame').attr('src', url)

Auf diese Weise können Sie jedes HTML-Tag-Attribut abrufen und festlegen. Beachten Sie, dass es auch gibt .prop(). Siehe .prop () vs .attr () zu den Unterschieden. Kurzversion: .attr()Wird für Attribute verwendet, die im HTML-Quellcode geschrieben sind, und .prop()für alles JavaScript, das an das DOM-Element angehängt ist.

PiTheNumber
quelle
Der Grund, warum dies nicht funktionieren würde, ist, dass nach dem Laden der Seite ein anderer Link den Quellcode auf einen neuen Wert ändern würde ...
testndtv
Wenn Sie den Code am Ende der Datei eingeben, wird der Code nach den anderen Skripten ausgeführt. Wenn Ihr Problem durch einen bestimmten Link verursacht wird, auf den der Benutzer klickt, können Sie dem Link ein zweites Onclick-Ereignis hinzufügen. Andernfalls müssen Sie setTimout / setInterval verwenden und den Wert von src (hässlich!) Wiederholen.
PiTheNumber
20

wenn Sie jQuery 1.6 oder höher verwenden, die Sie verwenden möchten .prop () statt.attr():

$('#abc_frame').prop('src', url)

In dieser Frage finden Sie eine Erklärung der Unterschiede.

kalyfe
quelle
4
Interessanter Link aber bitte beachten Sie, dass die Antwort aktualisiert wurde , weil jQuery zurückgekehrt attr() Verhalten. Insgesamt würde ich der Verwendung .prop()hier srcnicht zustimmen, da ein Attribut keine Eigenschaft ist, wie in der API-Dokumentation für .prop()Sie erläutert.
PiTheNumber
9

Setzen Sie beim Generieren der Links das Ziel auf die Eigenschaft iframes name, und Sie müssen sich wahrscheinlich überhaupt nicht mit jquery befassen.

<a href="inventory.aspx" target="contentframe"  title="Title Inventory">
<iframe id="iframe1" name="contentframe"  ></iframe>
Brian Rizo
quelle
Gute Idee, wenn möglich die native Methode des Browsers zu verwenden, aber ich denke, der Benutzer hat dynamische Links und muss daher den Klickattr erfassen.
Efwjames
Wie dynamisch? Stellen Sie beim Generieren der Seite einfach die href auf das ein, was Sie brauchen. Oder setzen Sie auch beim Laden von dom einfach das href-Attribut, wenn Sie müssen. Es geht darum, nicht die src-Eigenschaft des iframe behandeln zu müssen, und dies macht es möglich.
Brian Rizo
8 
$(document).ready(function() {
    $('#abc_frame').attr('src',url);
})
Jayendra
quelle
5

Das Festlegen des src-Attributs hat bei mir nicht funktioniert. Der Iframe zeigte die URL nicht an.

Was für mich funktioniert hat war:

window.open(url, "nameof_iframe");

Hoffe es hilft jemandem.

Hari
quelle
Die Einstellung mit .attr () hat bei mir auch nicht funktioniert. Dies funktioniert jedoch
Andy N
3 
<script type="text/javascript">
  document.write(
    "<iframe id='myframe' src='http://www.example.com/" + 
    window.location.search + "' height='100' width='100%' >"
  ) 
</script>

Dieser Code nimmt die URL-Parameter (? A = 1 & b = 2) von der Seite, die den Iframe enthält, und hängt sie an die Basis-URL des Iframes an. Es funktioniert für meine Zwecke.

Arend
quelle
document.writeist gleichbedeutend mit der Verwendung eval()- es unterliegt der Skriptinjektion! Nur mit äußerster Vorsicht verwenden!
Amphetamachine
1

Sie können den src von FIX iframe nicht festlegen oder verhindern, dass Javascript / Formular gesendet wird, um seinen Speicherort zu ändern. Sie können jedoch das Skript zum Laden der Seite hinzufügen und die Aktion jedes dynamischen Links ändern.

Jan Pfeifer
quelle
1 
$(".excel").click(function () {
    var t = $(this).closest(".tblGrid").attr("id");
    window.frames["Iframe" + t].document.location.href = pagename + "?tbl=" + t;
});

Dies ist, was ich benutze, keine Abfrage dafür erforderlich. In diesem speziellen Szenario für jede Tabelle, die ich mit einem Excel-Exportsymbol habe, wird der an diese Tabelle angehängte Iframe gezwungen, dieselbe Seite mit einer Variablen in der Abfragezeichenfolge zu laden, nach der die Seite sucht, und wenn eine gefundene Antwort einen Stream mit einem ausgibt Excel-Mimetyp und enthält die Daten für diese Tabelle.

vernmic
quelle