Ich möchte den HTML-Code in einem Iframe mit jQuery bearbeiten.
Ich dachte, ich wäre dazu in der Lage, indem ich den Kontext der jQuery-Funktion als Dokument des iframe festlegte.
$(function(){ //document ready
$('some selector', frames['nameOfMyIframe'].document).doStuff()
});
Dies scheint jedoch nicht zu funktionieren. Ein wenig Inspektion zeigt mir, dass die Variablen in frames['nameOfMyIframe']
undefined
sind, es sei denn, ich warte eine Weile, bis der iframe geladen ist. Wenn jedoch der iframe geladen wird, sind die Variablen nicht verfügbar (ich erhalte permission denied
- Fehler).
Kennt jemand eine Problemumgehung?
Ich denke, was Sie tun, unterliegt der gleichen Origin-Richtlinie . Dies sollte der Grund sein, warum Sie Berechtigungsverweigerungstyp-Fehler erhalten.
Wenn der <iframe>
aus derselben Domäne stammt, sind die Elemente leicht als zugänglich
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
$(document).ready(function(){
$('#frameID').load(function(){
$('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
});
Wenn das iframe src aus einer anderen Domäne stammt, können Sie es trotzdem tun. Sie müssen die externe Seite in PHP lesen und von Ihrer Domäne aus wiederholen. So was:
<?php
$URL = "http://external.com"
$domain = file_get_contents($URL)
echo $domain
?>
Dann so etwas wie:
<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 Beispiel zeigt, wie Sie eine externe Seite über einen iframe bearbeiten, ohne dass der Zugriff verweigert wird.
Benutzen
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 die Js dort ausführen, sodass 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 löst das Problem "Noch nicht geladen". Wenn Sie jedoch eine Seite in den iframe laden, die sich in einer anderen Domäne befindet, können Sie aufgrund von Berechtigungen aufgrund von Sicherheitsbeschränkungen nicht darauf zugreifen.
Mit window.postMessage können Sie eine Funktion zwischen Seite und seinem Iframe aufrufen (domänenübergreifend oder nicht).
page.html
<!DOCTYPE html>
<html>
<head>
<title>Page with an iframe</title>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var Page = {
id:'page',
variable:'This is the page.'
};
$(window).on('message', function(e) {
var event = e.originalEvent;
if(window.console) {
console.log(event);
}
alert(event.Origin + '\n' + event.data);
});
function iframeReady(iframe) {
if(iframe.contentWindow.postMessage) {
iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
}
}
</script>
</head>
<body>
<h1>Page with an iframe</h1>
<iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var Page = {
id:'iframe',
variable:'The iframe.'
};
$(window).on('message', function(e) {
var event = e.originalEvent;
if(window.console) {
console.log(event);
}
alert(event.Origin + '\n' + event.data);
});
$(window).on('load', function() {
if(window.parent.postMessage) {
window.parent.postMessage('Hello ' + Page.id, '*');
}
});
</script>
</head>
<body>
<h1>iframe</h1>
<p>It's the iframe.</p>
</body>
</html>
Ich bevorzuge eine andere Variante für den Zugriff. Vom übergeordneten Element aus können Sie auf die Variable im untergeordneten Iframe zugreifen. $
ist ebenfalls eine Variable und Sie können Zugriff auf ihren einfachen Aufruf window.iframe_id.$
erhalten.
Zum Beispiel window.view.$('div').hide()
- verstecke alle divs in iframe mit der ID 'view'
Aber es funktioniert nicht in FF. Für eine bessere Kompatibilität sollten Sie verwenden
$('#iframe_id')[0].contentWindow.$
Ich erstelle einen Beispielcode. Jetzt können Sie von verschiedenen Domänen aus leicht verstehen, dass Sie nicht auf Inhalte von iframe zugreifen können. Dieselbe Domäne können wir auf iframe-Inhalte zugreifen
Ich teile Ihnen meinen Code mit. Bitte führen Sie diesen Code aus und überprüfen Sie die Konsole. Ich drucke Bild src an der Konsole. Es gibt vier iFrames, zwei iFrames, die von derselben Domain stammen, und zwei von einer anderen Domain (von einem Drittanbieter). Sie können zwei Bild-src ( https://www.google.com/logos/doodles/2015/googles) anzeigen -neues-Logo-5078286822539264.3-hp2x.gif
und
https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) an der Konsole und kann auch zwei Berechtigungsfehler anzeigen (2 Fehler: Zugriff auf Eigenschaft 'Dokument' verweigert
... irstChild)}, contents: function (a) {return m.nodeName (a, "iframe")? a.contentDocument ...
), der von einem Drittanbieter iFrame stammt.
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
src="iframe.html" name="imgbox" class="iView">
</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
src="iframe2.html" name="imgbox" class="iView1">
</iframe>
<p>iframe from different domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">
</iframe>
<p>iframe from different domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">
</iframe>
<script type='text/javascript'>
$(document).ready(function(){
setTimeout(function(){
var src = $('.iView').contents().find(".shrinkToFit").attr('src');
console.log(src);
}, 2000);
setTimeout(function(){
var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
console.log(src);
}, 3000);
setTimeout(function(){
var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
console.log(src);
}, 3000);
setTimeout(function(){
var src = $('.iView3').contents().find("img").attr('src');
console.log(src);
}, 3000);
})
</script>
</body>
Haben Sie den Klassiker ausprobiert und darauf gewartet, dass der Ladevorgang mit der in Ready bereitgestellten jQuery-Funktion abgeschlossen wird?
$(document).ready(function() {
$('some selector', frames['nameOfMyIframe'].document).doStuff()
} );
K
Für noch mehr Robustheit:
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
und
...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );
if (frame_win) {
$(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
...
}
...
Ich bin hier auf der Suche nach dem Inhalt eines Iframes ohne Jquery gelandet.
document.querySelector('iframe[name=iframename]').contentDocument
Diese Lösung funktioniert genauso wie iFrame. Ich habe ein PHP -Skript erstellt, mit dem alle Inhalte von der anderen Website abgerufen werden können. Der wichtigste Teil ist, dass Sie Ihre benutzerdefinierte jQuery problemlos auf diesen externen Inhalt anwenden können. Bitte beachten Sie das folgende Skript, das alle Inhalte von der anderen Website abrufen kann. Anschließend können Sie auch Ihr jQuery/JS verwenden. Dieser Inhalt kann überall, innerhalb eines beliebigen Elements oder einer beliebigen Seite verwendet werden.
<div id='myframe'>
<?php
/*
Use below function to display final HTML inside this div
*/
//Display Frame
echo displayFrame();
?>
</div>
<?php
/*
Function to display frame from another domain
*/
function displayFrame()
{
$webUrl = 'http://[external-web-domain.com]/';
//Get HTML from the URL
$content = file_get_contents($webUrl);
//Add custom JS to returned HTML content
$customJS = "
<script>
/* Here I am writing a sample jQuery to hide the navigation menu
You can write your own jQuery for this content
*/
//Hide Navigation bar
jQuery(\".navbar.navbar-default\").hide();
</script>";
//Append Custom JS with HTML
$html = $content . $customJS;
//Return customized HTML
return $html;
}