Anpassen von HTML in iFrame - Javascript funktioniert nicht

Question

Ich habe Javascript/iFrame Beiträge auf StackOverflow für ca. 45 Minuten nachgeschaut und ich habe einige großartige Ressourcen gesammelt, aber ich kann das Javascript nicht richtig in einem iFrame funktionieren. Ich habe zwei Screenshots von einer Website beigefügt, die ich in meinem eigenen iFramed habe. Der iFrame öffnet sich mit einem geöffneten Menü, das 60% des Rahmens einnimmt. Ich möchte dem Menü eine Klasse hinzufügen, um sie beim Laden meiner Seite automatisch zu schließen. Ich habe das richtige JS, denke ich, aber ich kann es nicht funktionieren lassen. Die Klasse wird überhaupt nicht hinzugefügt.

Das ist mein iFrame und Javascript, um die div-ID "erweiterten" Klasse zu ändern. Ich weiß, es klingt albern, aber erweitert ist der Klassenname für das geschlossene Menü. Jede Hilfe wäre willkommen! Vielen Dank.

<iframe src="http://dayzdb.com/map#2.065.045" style="width:500px; height:300px;" id="dayzdb"></iframe> 

     <script>$("#dayzdb").contents().find("#mapContainer").addClass("expanded")</script> 

anstelle der HTML-Posting (da es lang ist) Ich habe die Website-Link gepostet, wo Sie Element auf der navbar inspizieren kann es zu sehen.

http://dayzdb.com/map

Answer 1

Verwenden Sie die gleiche Domain in Ihrer Seite und Ihre iframe? Vergessen Sie nicht die cross-domain Richtlinie, sonst wird es nicht funktionieren! Wenn Sie die Kontrolle über beide Websites haben, können Sie die Methode postMessage verwenden, um Daten zwischen verschiedenen Domänen zu übertragen. Ein sehr einfaches Beispiel:

// framed.htm: 
window.onmessage = function(event) { 
    event.source.postMessage(document.body.innerHTML, event.origin); 
}; 

// Main page: 
window.onmessage = function(event) { 
    alert(event.data); 
}; 

// Trigger: 
// <iframe id="myframe" src="framed.htm"></iframe> 
document.getElementById('myframe').contentWindow.postMessage('','*');