javascript - 在 iFrame 问题中注入(inject) HTML、CSS 和 JAVASCRIPT

Question

我正在尝试构建类似于 Tinkerbin 或 JSfiddle 的东西。 它用于个人项目。

这是我现在得到的:

http://mediodesign.ca/cms-test/

一切正常，除了 JAVASCRIPT 选项卡。我遵循了 Nettuts 上的“如何将自定义 HTML 和 CSS 注入(inject) iframe”教程(http://net.tutsplus.com/tutorials/html-css-techniques/how-to-inject-custom-html-and-css -into-an-iframe/).

这是我修改后的 javascript 代码:

(function() {
$('.grid').height( $(window).height() );    

var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head')),
    jsTag = $('<script><\/script>').appendTo(contents.find('head'));

$('textarea').keyup(function() {
    var $this = $(this);
    if ( $this.attr('id') === 'html') 
    {
    body.html( $this.val() );
    } 
    else
    {
    styleTag.text( $this.val() ), 
    jsTag.text( $this.val() );
    }

});  })  ();

我添加了 jsTag = $('<script><\/script>').appendTo(contents.find('head'));线和 jsTag.text( $this.val() ); .

我很确定它与 jsTag = $('<script><\/script>') 有关部分。 为什么是<style></style>正在工作，但 <script></script>不是吗？

请帮我解决这个问题，过去 2 小时我一直在处理这个问题!

再次感谢

Answer 1

我不是很喜欢 jQuery，所以我用纯 Javascript 做了这个解决方案(我稍后会在 jQuery 中尝试):

var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head')),
    jsTag = document.createElement('script');
contents.find('head')[0].appendChild(jsTag);