javascript - How to inject HTML, CSS and jQuery in realtime to iframe

I am trying to build a HTML, CSS and jQuery (not just JavaScript) editor, and show the rendered content in an iFrame. Although adding HTML, CSS part is easy, I am unable to execute the JavaScript part.

var html = ""; // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html);

var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
var head = $("#preview").contents().find("head");
head.append(cssLink);

var js ='<script>'+jsEditor()+'<\/script>' ; 

// following part is not working
var content = $('#preview').contents();
$content.find('head').append('<script src=".8.3/jquery.min.js"><\/script>' );             
$content.find('body').append(js );

I am able to execute to core JavaScript using window.eval(), however it is not working for any JS library included, e.g. jQuery etc.

var html = ""; // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html);

var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
var head = $("#preview").contents().find("head");
head.append(cssLink);

var js ='<script>'+jsEditor()+'<\/script>' ; 

// following part is not working
var content = $('#preview').contents();
$content.find('head').append('<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
$content.find('body').append(js );

I am able to execute to core JavaScript using window.eval(), however it is not working for any JS library included, e.g. jQuery etc.

Share Improve this question asked Sep 8, 2013 at 20:42 Gandalf 9303 gold badges10 silver badges24 bronze badges

Don't use iframes unless it's to include some external content. Anyway, why using this approach? Just add it to the html file or whatever you're doing without this mix-approach. – Jonast92 Commented Sep 8, 2013 at 20:52
@Jonast92 I think he's trying to make a real-time editor similar to JSFiddle/jsbin etc so therefore he cannot specify it in advance in the html file. – Rob Schmuecker Commented Sep 8, 2013 at 21:02
The duplicate question linked no longer exists. – Cameron Tinker Commented Aug 13, 2014 at 14:14

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

I think your only problem here is your variable naming:

var content = $('#preview').contents();
$content.find('head').append('<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
$content.find('body').append(js );

should be ($content ==> content)

var content = $('#preview').contents();
content.find('head').append('<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
content.find('body').append(js );

I modified your script slightly but only to provide some pre-canned values for html, csVal and a result from jsEditor().

This worked for me in Chrome, Safari & Firefox running off a server on localhost:

HTML:

<html>
    <head>
    </head>
    <body>
        <div>Look at your new iFrame</div>
        <iframe id="preview"></iframe>
        <script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js">
    </body>
</html>

Code (also in the html body):

$(document).ready(function() {
    var html = "<div>Hello from iframe</div>"; // HTML code
    var content = $("#preview").contents().find("body"); // iframe id is 'preview'

    content.html(html);

    var csVal = "div { color: red; font-size: 40px;}";
    var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
    var head = $("#preview").contents().find("head");
    head.append(cssLink);

    var jsCode = "alert('you are in the iframe')";

    var js ='<script>'+jsCode+'<\/script>' ; 

    // following part is not working
    var content = $('#preview').contents();
    content.find('head').append('<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
    content.find('body').append(js );
});

Resulting source in the iFrame:

<html>
    <head>
        <style>
            div {
                color: red;
                font-size: 40px;
            }
        </style>
        <script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>

    <body>
        <div>Hello from iframe</div>
        <script>
            alert('you are in the iframe')
        </script>
    </body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to inject HTML, CSS and jQuery in realtime to iframe - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)