admin管理员组

文章数量:1414628

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.

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="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.

  • javascript
  • jquery
  • iframe
Share Improve this question asked Sep 8, 2013 at 20:42 GandalfGandalf 9303 gold badges10 silver badges24 bronze badges 3
  • 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

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>

本文标签： javascriptHow to inject HTMLCSS and jQuery in realtime to iframeStack Overflow

版权声明：本文标题：javascript - How to inject HTML, CSS and jQuery in realtime to iframe - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745186793a2646721.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。