How to add JavaScript code into existing iFrame us

2019-02-01 23:43发布

站内问答 / JavaScript
926 8 4

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

Code:

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

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

But somehow this is not working. I checked some of the existing/related answers, and it seems jQuery does not quite recognize the script tags as...script tags. The iFrame is in the same domain/same port/same host, so there is no issue about cross-site scripting etc. How can I fix this?

8条回答
淡お忘
2楼-- · 2019-02-02 00:19

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) 举报
混吃等死
3楼-- · 2019-02-02 00:21

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 way

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

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

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

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
4楼-- · 2019-02-02 00:28 
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);
        }
    });
}

This was the simplest way I could make it work.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
5楼-- · 2019-02-02 00:35

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) 举报
该账号已被封号
6楼-- · 2019-02-02 00:38

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) 举报
劫难
7楼-- · 2019-02-02 00:39

You need to escape the /script. It apears.

Do like google analitcs for instance

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

replace the script and /script with this escaped ones

Hope it helps.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)