jQueryを使用してスタイルシートをiframeに追加する

StackOverflow https://stackoverflow.com/questions/624979

質問

HTMLエディターを作成しています。これは、今入力しているものに似ており、以下の出力があります。 iframeを使用して、$ htmlTextBox.val（）をiframeの本文にダンプしています。

iframe内でスタイルシートを作成して、見栄えを良くしようとしています。

事前に感謝します！

$htmlTextBox.keyup(function(){
    SetPreview();
});   

function SetPreview()
{
    var doc = $preview[0].contentWindow.document;
    var $body = $("body", doc);

    $body.html($htmlTextBox.val());
}
役に立ちましたか？

解決

iframeのdocument.styleSheetsとやり取りすることはできますが、昔ながらの信頼できる方法は、最初にスタイルシートを用意することです（空を指すiframe-srcを記述することにより）目的のスタイルシートを使用してドキュメントを作成する）、または document.write（）を使用して配置します。例：

<body>
    <iframe></iframe>
    <script type="text/javascript">

        var d= frames[0].document;
        d.open();
        d.write(
            '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">'+
            '<html><head><style type="text/css">'+
            'body { font-size: 200%; }'+
            '<\/style><\/head><body><\/body><\/html>'
        );
        d.close();

        d.body.innerHTML= '<em>Hello</em>';
    </script>
</body>

（これにより、iframeドキュメントが標準モードに設定されます。これが必要な場合です。）

他のヒント

フォローアップ：

HTML 

<iframe id="message" name="message" />

jQuery 

setTimeout(function() {
    var $head = $("#message").contents().find("head");                
    $head.append($("<link/>", 
        { rel: "stylesheet", href: url, type: "text/css" }
    ));                
}, 1);

スタイルタグをiframeに挿入できます。

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

以下のコードをjHtmlAreaソースからプルしました。おもしろいことに、機能がそこにあり、私はそれを理解していませんでした。私はそれを実装する方法を見つけようとしていたときにこのSO質問に出くわしました。 ：）

これは実際には＆quot; jQuery＆quot;ではありませんしかし、それは動作します。私は、appendがiframeで動作しないので、古い学校でやったと思っています。ボビンスの答えもよさそうだし、もっと信頼できるかもしれない？これまでのところ、これはうまくいくようです。

var e = edit.createElement('link'); 
e.rel = 'stylesheet'; 
e.type = 'text/css'; 
e.href = options.css; 
this.iframe[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(e);

編集：これが機能する理由は、同じドメイン（jsでのiframeの作成を含む）である場合だと思います。

iFrameにCSSを適用する方法

をご覧ください。

同じドメインにいて、クロスドメインセキュリティを扱っていない場合、iFrameがロードされているかどうかを確認したいでしょう。 （これにより、 .load（）を使用しようとしてしばらくハングアップしました）

次に、jqueryを使用して、コンテンツにアクセスし、ヘッドにアクセスして、スタイルシートをヘッドに追加します。

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top