Comment ajouter du code JavaScript dans un iFrame existant en utilisant jQuery?

Je veux ajouter un extrait de code JavaScript dans une iFrame dans la page à l'aide de jQuery. J'ai le code suivant...

Code:

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

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

Mais de toute façon ce n'est pas de travail. J'ai vérifié une partie du/réponses, et il semble que jQuery n'est pas tout à fait reconnaître les balises de script comme...des balises de script. L'iFrame est dans le même domaine/port/même hôte, alors il n'est pas question de " cross-site scripting, etc. Comment puis-je résoudre ce problème?

source d'informationauteur Gandalf

  1. 18

    Le problème est que l'analyseur HTML devient confus si votre script contient le script de fermeture de la balise (</script>) et il ferme la balise de script prématurément.

    La solution est d'échapper à la / dans "<\/script>". Cela fonctionne parce que les chaînes de caractères en JavaScript, (et quelques autres langues), tout invalide les séquences d'échappement sont tout simplement ignorés, donc "\l" est traitée comme "l"et "\/" est traitée comme "/". L'analyseur HTML, cependant, ne pas utiliser une barre oblique inverse de leur échapper, donc il ne peut pas se confondre (crédits de https://stackoverflow.com/users/405681/keaukraine).

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

    Solution originale façon

    Briser que la balise de fermeture afin de ne pas gâcher l'analyseur HTML. Les autres solutions sur cette page fonctionnent parce qu'ils n'ont jamais la chaîne </script> dans leur code

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

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

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

    travaille dans Violon

  3. 4
    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);
        }
    });
}

    C'était la façon la plus simple que je pouvais le faire fonctionner.

  4. 3

    Vous avez besoin pour échapper à la /script.
    Il apears.

    Faire comme google analitcs par exemple

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

    remplacer le script et /script avec ce échappé à ceux

    Espère que cela aide.

  5. 2

    Que l'iframe s'exécute en tant que c'est propre windowvous devrez également injecter de l'importation de l'jquery.js fichier.

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

    EDIT: Donc j'ai joué avec cela un peu plus et c'est ici que je suis venu avec.

    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>"
);

    Cela fonctionne, voir ici http://jsfiddle.net/WsCxj/.

    Il y a donc plusieurs points:

    1. Je suis de passage sur l'ensemble du contenu sous forme de chaîne. Vous devez ajouter data:text/html;charset=utf-8, et puis vous pouvez définir votre chaîne src de l'iframe.

    2. Je suis l'ajout de l'jquery.js fichier avec un chemin d'accès absolu - Ce qui semble être important, sans doute parce que l'image n'a pas de chemin par lui-même, que son contenu est généré dynamiquement.

    3. J'ai divisé le script de fin de balise comme ceci <" + "/script> parce qu'au moins firefox tente de mettre fin au script lui-même à ce point. Le nettoyeur approche serait probablement d'avoir la js comme totalement fichier séparé.

  6. 1

    Vous n'avez pas besoin d'ajouter une balise de script à exécuter javascript, vous pouvez faire une fonction et d'appliquer iframe contexte...

    en utilisant eval

    function initFrame (code){

    eval (code);

}

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

    Sans eval

    var initFrame = new Function(js_code);


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

    Je ne peux pas commenter à votre dernier post, parce que je suis nouveau ici et je n'ai pas assez de réputation, mais comme je l'ai dit dans mon post, le problème était dans le script.

    Pour échapper ( comme google par exemple ) est peut-être la meilleure option...

    Bien, la bonne nouvelle, c'est que le problème est résolu 😉

    Ce qui concerne

  8. -1

    Comment sur la configuration d'actualisation ajax avec js fonction d'intervalle à prendre toutes les données stockées dans le fichier/session etc. ?

    C'est surement pas le plus léger mode et il s'agit d'un tout petit peu de php, mais peut faire le travail.