2

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

这是我现在得到的：

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

一切正常，除了 JAVASCRIPT 选项卡。我遵循了 Nettuts 上的“如何将自定义 HTML 和 CSS 注入 iframe”教程（http://net.tutsplus.com/tutorials/html-css-techniques/how-to-inject-custom-html-and-css -进入 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 个小时里一直在解决这个问题！

再次感谢

4

2 回答 2

0

我对 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);
于 2012-05-07T02:02:09.987 回答
0

除非您将脚本附加到代码中，否则您的脚本不会被评估，然后 jQuery 将获取并解析它。只注入一个空的脚本标签不会产生任何效果，因为 jQuery 并没有真正将它放入 DOM，而只是在运行时解析它。

于 2012-05-07T02:21:30.730 回答