Eine Klasse hinzufügen, um ein element in einen iframe mit jQuery
<iframe src="/demo.php" id="source"></iframe>
$('#source').delegate('*', 'hover', function() {
$(this).addClass('hover');
});
$('#source').delegate('*', 'mouseout', function() {
$(this).removeClass('hover');
});
$('#source').delegate('*', 'click', function() {
alert($(this).html());
return false;
});
Passiert nichts, wenn ich den Mauszeiger über oder klicken Sie auf ein beliebiges element innerhalb des Iframe. Das Iframe auf der gleichen domain, und ich war/bin unter dem Eindruck, dass, solange der Iframe src ist auf der gleichen domain, sollte es funktionieren.
Irgendwelche Ideen auf, wie diese Arbeit zu machen?
InformationsquelleAutor David B. | 2010-10-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
LETZTE ÄNDERUNG:
Gibt es zwei Probleme:
Verwenden
$('#source').contents()
anstatt einfach mit$('#source')
Die css-Regel für
.hover
ist nicht sichtbar in den Rahmen des iframe.Entweder
.css()
zu setzen Stil direkt fügen Sie den css-links indemo.php
oder Klonen Sie alle styles in das Haupt-Dokument in der iframe mit jQuery.Außerdem sollten Sie es vermeiden
.live
wie es scheint einige Problems innerhalb iframes (bei Verwendung des live-jQuery bindet spezielle Event-Handler auf das Dokument, und prüft Ereignisse, wenn Sie hochsteigen)Hier ist ein funktionierendes Beispiel (jsFiddle link):
ORIGINAL-ANTWORT:
Dein problem ist, dass Sie mit dem iframe als Kontext. Sollten Sie die frame-Dokument statt.
Eben auch für Sicherheit, möchten Sie vielleicht fügen Sie Ihren code in der onload-event wie diesem:
Können Sie dieses live-jsFiddle Beispiel.
EDIT 1:
Ok, also das eigentliche problem ist, dass die css-styles sind nicht sichtbar innerhalb des iframe.
Zum Beispiel, wenn Sie verwenden
$(this).css('color':'red')
stattaddClass
es funktionieren würde. Siehe die aktualisierte jsFiddleWas ich vorschlagen, ist entweder die richtige css-Stile bereits in
demo.php
oder eingefügt, danach etwa so:aktualisiert jsFiddle - mit addClass und das Klonen von Stilen
Sie können sehen, live-demo hier: jsfiddle.net/QBVfw/6
Sie können nicht fügen Sie Ihre Seite in der jsFiddle Beispiel iframe, da wäre das cross-site-scripting....
Ach ja, ich vergaß, mindslip. Jedoch, es funktioniert nicht auf meiner lokalen version, die entweder ohne die XSS-Problem. Ich kann es nicht wieder zu tun, alles auf schweben, oder klicken Sie auf.
Haben Sie schaute auf die aktualisierte jsFiddle? Ich denke, das problem ist, dass die hover-Klasse ist nicht in einer beliebigen css/style sichtbar innerhalb des iframe
InformationsquelleAutor Dan Manastireanu
versuchen Sie es mit diesem Inhalt:
demo.php:
code:
InformationsquelleAutor andres descalzo