Как добавить код JavaScript в существующий iFrame с помощью jQuery?

Я хочу добавить фрагмент JavaScript в существующий iFrame на странице с помощью jQuery. У меня есть следующий код...

код:

content = "<script>" + js_code + "</script>";

$('#iframe_id').contents().find('body').append(content);

Но почему-то это не работает. Я проверил некоторые из существующих/связанных ответов, и кажется, что jQuery не совсем распознает теги script как... теги сценария. IFrame находится в том же домене/том же порту/одном хосте, поэтому нет проблем с межсайтовыми скриптами и т.д. Как я могу это исправить?

Ответы

Ответ 1

Проблема заключается в том, что парсер HTML путается, если ваш script содержит закрывающий тег script в нем (</script>) и закрывает тег script преждевременно.

Решение состоит в том, чтобы разбить этот закрывающий тег, чтобы вы не испортили парсер HTML. Другие решения на этой странице работают, потому что они никогда не имеют строки </script> в своем коде

var scriptTag = "<script>alert(1)<";
scriptTag +=  "/script>";
console.log(scriptTag);
$("#iframe").contents().find("body").append(scriptTag);

http://jsfiddle.net/ALpjZ/2/

Или даже лучше, как предложено https://stackoverflow.com/users/405681/keaukraine, просто выйдите из / в "<\/script>". Это работает, потому что строки в JavaScript (и некоторых других языках), любые недопустимые escape-последовательности просто игнорируются, поэтому "\l" рассматривается как "l", а "\/" рассматривается как "/". Парсер HTML, однако, не использует обратную косую черту, чтобы избежать их, поэтому он не путается.

var scriptTag = "<script>alert(1)<\/script>";
$("#iframe").contents().find("body").append(scriptTag);

Ответ 2

var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

работает в Fiddle

Ответ 3

function putScriptInIframes(script, scriptId) {

   var $iframes = $('iframe');
   $iframes.each(function () {
        var thisDoc = this.contentWindow.document;
        if ( ! thisDoc.getElementById(scriptID)) {
            var scriptObj = thisDoc.createElement("script");
            scriptObj.type = "text/javascript";
            scriptObj.id = scriptId;
            scriptObj.innerHTML = script;
            thisDoc.body.appendChild(scriptObj);
        }
    });
}

Это был самый простой способ заставить его работать.

Ответ 4

Вам нужно избежать /script. Он появляется.

Сделайте, например, google analitcs

 $("#iframe").contents().find("body").append(decodeURI("**%3Cscript%3E** alert(2)  **%3C/script%3E**"));

замените script и /script на эти экранированные

Надеюсь, что это поможет.

Ответ 5

Поскольку iframe работает как собственный window, вам также нужно будет импортировать файл jquery.js.

<script type="text/javascript" src="/jquery/jquery-ui-1.9.1.custom.js"></script>

EDIT: Итак, я играл с этим немного больше, и вот что я придумал.

HTML

<iframe id="frame"></iframe>

JS

$("#frame").attr(
   "src", "data:text/html;charset=utf-8," + 
   "<html>" + 
   "<style>.red {color: red}</style>" + 
   "<div class=\"test\">Test</test>" + 
   "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
   "<script>$(function(){ $(\".test\").addClass(\"red\")});<" + "/script>" +         
   "</html>"
);

Это работает, см. здесь http://jsfiddle.net/WsCxj/.

Итак, есть несколько точек:

  • Я передаю весь контент как одну строку. Вы должны добавить data:text/html;charset=utf-8,, а затем вы можете установить свою строку как src iframe.

  • Я добавляю файл jquery.js с абсолютным путем. Это кажется важным, по-видимому, потому, что кадр не имеет никакого пути сам по себе, поскольку он динамически генерируется.

  • Я разделил тег script как этот <" + "/script>, потому что по крайней мере firefox пытается завершить фактический script на этом этапе. Более чистый подход, вероятно, заключался бы в том, чтобы js был полностью отдельным файлом.

Ответ 6

Вам не нужно добавлять тег script для выполнения javascript, вы можете выполнить функцию и применить контекст iframe...

используя eval

function initFrame (code){

    eval (code);

}

initFrame.apply ($('#iframe').contents(),[js_code]);

Без eval

var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);

Ответ 7

Я не могу комментировать ваш последний пост, потому что я новичок здесь, и у меня нет достаточной репутации, но, как я сказал в своем посте, проблема была в / script.

Так что избегая его (например, google), возможно, это лучший вариант...

Хорошо, хорошая новость в том, что проблема решена;)

Привет

Ответ 8

Как настроить обновление ajax с помощью функции интервала js для хранения любых данных, хранящихся в файле/сеансе и т.д.?

Это, безусловно, не самый легкий режим, и он включает в себя крошечный бит php, но может выполнять работу.