Wie injiziere ich <script> Tag in leere iframe ohne document.write?

Ich möchte eine iframe laden, die nichts anderes tut, als eine JavaScript-Datei von einer bestimmten URL zu laden. Dies wäre zwar einfach, indem Sie eine einfache HTML-Seite in den Iframe laden, der nur das <script>-Tag enthält, um die JavaScript-Datei zu laden, aber das würde zwei Anforderungen an den Server erfordern.Wie injiziere ich <script> Tag in leere iframe ohne document.write?

Also meine Idee ist, den Code zu schreiben, um die JS-Datei von der aufrufenden Methode im übergeordneten Fenster in den leeren iframe zu laden.

So etwas wie dies funktioniert auf allen Browsern:

function createScriptFrame(container, url) { 
    const frame = document.createElement('iframe'); 
    container.appendChild(frame); 
    const doc = frame.contentDocument; 
    doc.open(); 
    doc.write('<html><body><script src="' + url + '"></script></body></html>'); 
    doc.close(); 
}

Aber mit document.write eine wirklich unangenehme Art und Weise ist, es zu tun. Chrome klagt sogar mit einer Warnung in der Konsole: [Verletzung] Vermeiden Sie die Verwendung von document.write().

Ich habe mit ein paar alternative Ansätze kommen, zum Beispiel:

// same as above until doc.open() 
const s = doc.createElement('script'); 
s.src = url; 
doc.head.appendChild(s);

oder

const s = doc.createElement('script'); 
s.appendChild(doc.createTextNode('(function() { const s = 
document.createElement("script"); s.src = "' + url + '"; 
document.body.appendChild(s); })()')); 
doc.head.appendChild(s);

Diese funktionieren gut in Chrome und Safari, aber nicht in Firefox.

Ich habe einen Test mit mehreren Methoden zusammengestellt, das Skript zu laden: https://embed.plnkr.co/l8DwUBQs7cQsi938eTOn/

Irgendwelche Ideen, wie diese Arbeit zu machen?

Quelle

2017-07-05 Philipp Jardas

Sie können einen Klecks erstellen und öffnen Sie sie

var url = 'foo' 
var blob = new Blob([ 
    '<html><body><script src="' + url + '"></script></body></html>' 
], {type: 'text/html'}) 
var iframeUrl = URL.createObjectURL(blob) 
console.log(iframeUrl)

... Oder wenn Sie eine URL base64 wie

Sie können auch die srcdoc verwenden, aber es wird nicht von IE/Edge-

unterstützt

Quelle

2017-07-05 11:33:25 Endless

Nette Idee, ich habe Blob und Daten-URL zum Plunk hinzugefügt, aber keiner funktioniert in jedem Browser. Der Frame-Inhalt wird ordnungsgemäß erstellt, aber 'frame.js' wird nie geladen. Könnte eine Sicherheitsbeschränkung sein. –

Sie müssen das "Basis" -Tag hinzufügen oder absoluten Pfad zu Ihrer Javascript-Datei verwenden – Endless

gibt es ein Unterschied zwischen Blob und DataURI darin, dass Blobs die Origin-Eigenschaft erben, die für den Zugriff auf den gleichen lokalen Speicher wichtig sein kann, Cookies, indexeddb, cors -request usw. – Endless

Wie injiziere ich <script> Tag in leere iframe ohne document.write?

Antwort

Verwandte Themen