发表新帖
发表新帖

How to add JavaScript code into existing iFrame using jQuery?

前端 未结
关注
8 2122
借酒劲吻你
借酒劲吻你 2020-12-13 08:13

I want to add a JavaScript snippet into an existing iFrame in the page using jQuery. I have the following code...

Code:

content = \"
相关标签:
8条回答
  • -上瘾入骨i
    2020-12-13 08:25

    This worked for me, paste following code in the page which is in an iframe, not the parent page:

    window.myFunction = function(args) {
   alert("script from iframe");
}

    And now add following code to call above function:

    var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);
    0 讨论(0)
  • 梦如初夏
    2020-12-13 08:26

    How about setting ajax refresh with js interval function to take any data stored in file/session etc. ?

    It's surely not the most lightweight mode and it involves a tiny bit php, but can do the work.

    0 讨论(0)
  • 误落风尘
    2020-12-13 08:28

    The problem is that the HTML parser gets confused if your script contains the closing script tag in it (</script>) and it closes the script tag prematurely.

    The solution is to escape the / in "<\/script>". This works because strings in JavaScript, (and some other languages), any invalid escape sequences are just ignored, so "\l" is treated as "l", and "\/" is treated as "/". The HTML parser, however, doesn't use a backslash to escape them so it doesn't get confused (credits to https://stackoverflow.com/users/405681/keaukraine).

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

    Original solution

    Break up that closing tag so you don't mess up the HTML parser. The other solutions on this page work because they never have the string </script> in their code (jsfiddle):

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

    Or (jsfiddle):

    var scriptTag = "<script>alert(1)<"+"/script>";
$("#iframe").contents().find("body").append(scriptTag);
    0 讨论(0)
  • 名媛妹妹
    2020-12-13 08:28

    You don't need add a tag script to execute javascript, you can do a function and apply iframe context...

    using eval

    function initFrame (code){

    eval (code);

}

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

    Without eval

    var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);
    0 讨论(0)
  • 既然无缘
    2020-12-13 08:30

    As the iframe runs as it's own window, you will have to also inject the import of the jquery.js file.

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

    EDIT: So I played with this a bit more and here is what I came up with.

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

    This works, see here http://jsfiddle.net/WsCxj/.

    So there are several points:

    1. I am passing the entire content as one string. You have to prepend data:text/html;charset=utf-8, and then you can set your string as src of the iframe.

    2. I am adding the jquery.js file with an absolute path - This seems to be important, presumably because the frame has no path by itself as it's content is dynamically generated.

    3. I split the script end tag like this <" + "/script> because at least firefox tries to end the actual script at this point. The cleaner approach would probably be to have the js as totally separate file.

    0 讨论(0)
  • 悲哀的现实
    2020-12-13 08:33 
    var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

    works in Fiddle

    0 讨论(0)
 看不清?
提交回复
热议问题