Question

我正在一个小项目中构建一个html预览工具，我试图找到放置html和css的最佳方法，将html格式化为iframe。

我能够创建iframe并将我的div的html内容放在里面。到目前为止，似乎工作正常in this fiddle

$(function() {

    var $html = $("#html").html();
    var $frame = $('<iframe>');
        $('body').html( $frame );

    var doc = $frame[0].contentWindow.document;
    var $framehtml = $('html',doc);
        $framehtml.html($html);

});

但是如何将css添加到iframe的头部呢？例如，将你在小提琴中看到的类.mobile添加到iframe的头部，以便当iframe达到500px的宽度时隐藏图像？

编辑：我不想注入css样式表。我宁愿在头部创建一个标签，并将你看到的css放在小提琴中。

Answer 1

@FRAN和@ APAD1是对的，这是重复的。我能够使用这些答案来创建我自己的updated fiddle

    var $head = $("#myframe").contents().find("head");                
    $head.append($("<style/>", 
                   {type: "text/css" }));


    var $style = $("#myframe").contents().find("style");                
    $style.append($css);

使用javascript将HTML和CSS放在我的iframe中

1 个答案: