Как загрузить и выполнить содержимое jQuery в iframe?

Я хотел бы загрузить iframe с динамическим html и скриптом, а затем выполнить его. В моем HTML документа, у меня есть этот простой IFrame тег:Как загрузить и выполнить содержимое jQuery в iframe?

<iframe></iframe>

И мой JQuery скрипт, который загружает на Документе Ready, и предполагается подготовить IFRAME:

$(document).ready(function() { 
    // Add jQuery lib 
    $('iframe').contents().find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>)'); 

    // Add div to body 
    $('iframe').contents().find('body').html('<div id="myDiv">Initial</div>'); 

    // Add script to change div 
    $('iframe').contents().find('body').html('<script>$("#myDiv").html("Changed")</script>'); 
});

выше JQuery скрипт должен делать следующее внутри фрейма:

Загрузите библиотеку JQuery
настроить DIV в теле с простым текстом в нем
Настройки сценарий JQuery в теле, где я использую селектор JQuery, чтобы изменить содержание DIV

Но я не получаю очень далеко, так как окно консоли говорит:

неперехваченных SyntaxError: Неожиданный токен ILLEGAL

Что я хочу с этим вопросом, так это узнать, как я могу получить скрипт внутри iframe, чтобы изменить текст его div на «Изменено».

Я создал jsFiddle.

* UPDATE *

Я не вижу, как это дубликат Script tag in JavaScript string, который разбором строк в JavaScript. О чем я говорю, заключается в том, как я могу загружать динамические html и jQuery в iframe, а затем выполнять скрипт.

источник

2015-10-30 mrturtle

Почему вы не загружать содержимое внутри DIV вместо ?? – User2012384

Потому что он должен быть изолирован в iframe. – mrturtle

Вы можете использовать srcdoc, не все браузер поддерживает эту

делать все, что вы хотите в этом ATTR

$(document).ready(function() { 
 
    console.log($('#myIframe')) 
 
    // Add jQuery lib 
 
    $('#myIframe').attr('srcdoc', "<!DOCTYPE html>" + 
 
"<html>" + 
 
"<head>" + 
 
    "<meta charset=\"utf-8\">" + 
 
    "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">" + 
 
    "<title><\/title>" + 
 
    "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"><\/script>" + 
 
    "<script>" + 
 
    "$(function() {" + 
 
     "$('body').html('<div id=\"myDiv\">Initial<\/div><button id=\"myButton\">Click to change<\/button>');" + 
 

 
     "$('#myButton').on('click', function() {" + 
 
     "$('#myDiv').html('Changed');" + 
 
     "});" + 
 
    "})" + 
 
    "<\/script>" + 
 
"<\/head>" + 
 
"<body>" + 
 
"<\/body>" + 
 
"<\/html>") 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<iframe id="myIframe"></iframe>

источник

2015-10-30 09:11:47 zhea55

Спасибо. Но, как вы пишете, он не поддерживается во всех браузерах. – mrturtle

Ваше решение, по-видимому, работает во всех основных браузерах, если я включу этот полипол: https://github.com/jugglinmike/srcdoc-polyfill – mrturtle

На самом деле ваш код может работать хорошо. Ошибка, которую вы видите, это тег end html, который должен быть изменен на <\/script>. Слэш должен быть убегающим. – zhea55

Как загрузить и выполнить содержимое jQuery в iframe?

ответ

Смежные вопросы