rz.
Ich möchte den HTML-Code in einem Iframe mit jQuery bearbeiten.
Ich dachte, ich könnte dies tun, indem ich den Kontext der jQuery-Funktion auf das Dokument des iframe setze, etwa so:
$(function(){ //document ready
$('some selector', frames['nameOfMyIframe'].document).doStuff()
});
Dies scheint jedoch nicht zu funktionieren. Eine kleine Inspektion zeigt mir, dass die Variablen in frames['nameOfMyIframe'] sind undefined Es sei denn, ich warte eine Weile, bis der iframe geladen ist. Wenn der Iframe jedoch geladen wird, sind die Variablen nicht zugänglich (ich bekomme permission denied-Typfehler).
Kennt jemand eine Abhilfe dafür?
Yasir Lagari
Wenn die <iframe> ist aus der gleichen Domäne, die Elemente sind leicht zugänglich wie
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
Referenz
Onur Bebin
Ich denke, was Sie tun, unterliegt dem gleiche Ursprungspolitik. Dies sollte der Grund sein, warum Sie bekommen Typ Berechtigung verweigert Fehler.
davryusha
Du könntest benutzen .contents() Methode von jQuery.
Die .contents() -Methode kann auch verwendet werden, um das Inhaltsdokument eines Iframes zu erhalten, wenn sich der Iframe auf derselben Domäne wie die Hauptseite befindet.
$(document).ready(function(){
$('#frameID').load(function(){
$('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
});
Schmied
Wenn der iframe src von einer anderen Domäne stammt, können Sie dies immer noch tun. Sie müssen die externe Seite in PHP einlesen und von Ihrer Domain ausgeben. So was:
iframe_page.php
<?php
$URL = "http://external.com";
$domain = file_get_contents($URL);
echo $domain;
?>
Dann so etwas:
display_page.html
<html>
<head>
<title>Test</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
cleanit = setInterval ( "cleaning()", 500 );
});
function cleaning(){
if($('#frametest').contents().find('.selector').html() == "somthing"){
clearInterval(cleanit);
$('#selector').contents().find('.Link').html('ideate tech');
}
}
</script>
<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>
Das Obige ist ein Beispiel dafür, wie Sie eine externe Seite über einen Iframe bearbeiten, ohne dass der Zugriff verweigert wird usw.
Benutzer
Verwenden
iframe.contentWindow.document
anstatt
iframe.contentDocument
Ich finde diesen Weg sauberer:
var $iframe = $("#iframeID").contents();
$iframe.find('selector');
Sie müssen ein Ereignis an den Onload-Handler eines Iframes anhängen und das darin enthaltene js ausführen, damit Sie sicherstellen können, dass der Iframe vollständig geladen ist, bevor Sie darauf zugreifen.
$().ready(function () {
$("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
$('some selector', frames['nameOfMyIframe'].document).doStuff();
});
};
Das obige wird das Problem „noch nicht geladen“ lösen, aber in Bezug auf die Berechtigungen können Sie aufgrund von Sicherheitsbeschränkungen nicht darauf zugreifen, wenn Sie eine Seite im Iframe laden, die von einer anderen Domäne stammt.
10051300cookie-checkWie kann ich mit JavaScript/jQuery auf den Inhalt eines Iframes zugreifen?yes
Was enthält der iFrame – ist sein src auf eine andere Domain eingestellt?
– James
14. Dezember 2008 um 0:32 Uhr
Wenn es sich um eine andere Domain handelt, gibt es immer noch eine Möglichkeit, auf deren Inhalt zuzugreifen oder ein Ereignis zu registrieren
– adardesign
1. Oktober 2009 um 15:59 Uhr
Nein, denn das wäre Cross-Site-Scripting, was aus Sicherheitsgründen verboten ist. Meine Lösung bestand darin, einen Proxy zu verwenden: den HTML-Code im IFRAME wortwörtlich durch meine eigene Site zu füttern, damit er aus Sicht des Browsers nicht mehr seitenübergreifend ist.
– reinierpost
6. April 2010 um 8:10 Uhr
Es ist browserübergreifender zu verwenden
.contentWindow.documentals.documentauf deriframeElement. Ich schlage die Änderung oben vor.– Allan H.
8. Juli 2011 um 20:04 Uhr
Eine Möglichkeit sind Chrome-Erweiterungen
– Muhammad Umer
16. April 2013 um 13:14 Uhr