7

次のコードを実行すると、body タグと head タグが削除されます。

<iframe src='blank.htm'>
    <html>
    <head>
        <style type="text/css">

        </style>
    </head>
    <body>
        test
    </body>
    </html>
</iframe>
<script>
    $('iframe').load(function () {
        var contents = $('iframe').text();
        $('iframe').contents().find('html').html(contents);
    });
</script>

その後、スタイル タグを削除すると、すべてが正しく表示されます。これはなぜですか?また、head タグと body タグの削除を停止するにはどうすればよいですか? コンテンツを操作せずにそのまま入力したい。

4

2 に答える 2

16

私は同じ問題を抱えていて、この SO の質問から、実際にはプロパティの解析の一環としてストリッピングを行うのはブラウザーでありinnerHTML、これjQueryは.html().

むしろ問題は、実際にjQueryは、特定のタグを含めることが許可されていないと思われる中間の新しい DIV を使用することであり、その結果、ストリップが発生します。

それでは解決へ。innerHTML次のように、要素のプロパティをhtml直接設定するのと同じくらい簡単です。

// This forcibly removes head, body, and other tags, since it internally uses an empty DIV and its innerHTML property
jQuery(targetElement).html(exitHtml);

// This works fine
h = document.getElementsByTagName('html')[0];
h.innerHTML = htmlString;

特定のケースでは、内のhtml要素をターゲットにするだけです。最終的なコードは次のようになります。iframe

<script>
    $('iframe').load(function () {
        var contents = $('iframe').text();
        iframeHtml = $('iframe').contents().find('html').get(0);
        iframeHtml.innerHTML = contents;
    });
</script>
于 2013-04-22T21:25:29.127 に答える
3

iframe コンテンツを文字列にコピーし、変更し、iframe で置き換える方法を理解するための手順を次に示します。これらの手順は、Chrome デバッガーで実行することを意図しており、教育/デモンストレーションのみを目的としています。プロセスを理解したら、Web サイトのコードで複製を試みることができます。

Chrome デバッガーで各関数を一度に 1 つずつ実行します。

// test iframe I loaded in a sandbox also at http://example.com
$('body div:first').before('<iframe src="http://example.com/company"></iframe>');

// retrieved the body of the iframe - I cloned it so I could perform operations
  // on the copy without bothering the iframe content.
iBody = $('iframe:first').contents().find('body').clone();

// got the head
iHead = $('iframe:first').contents().find('head').html();

// if there is script in the body, it really messes things up. So in my tests, 
  // I had to remove it before adding it back to the iframe.
iBody.find("script").remove();

// verify there are no script elements
ibody.html(); 

// replace the iframe head
$('iframe:first').contents().find('head').html(iHead);

// replace the iframe body first with a placeholder. The body is the sensitive 
  // part. If you destroy the DOM, it can make the entire page, including 
    // the parent, turn completely white.
$('iframe:first').contents().find('body').html('<div></div>');

// ** inserted something in the copy to prove we modified it!!
iBody.append("<div style='position:absolute;z-index:5000; color:red; " + 
    "background-color:white;'>JAMES WAS HERE</div>");

// now replace the body
$('iframe:first').contents().find('body').html(iBody);

ウェブサイトの下部、iframe 内に、白い背景に赤いメッセージが表示されました。ソースでも見ることができました：

$('iframe:first').contents().find('body').html();

Chrome のデバッガー コンソールを使用してコマンドを実行し、匿名の Web サイトでこれらのアクションを実行しました。最初のコマンドは、ホームページに iframe を作成し、サイトの企業ページを iframe に作成します。残りのコマンドは、その iframe の head と body を取得し、body を複製し、"JAMES WAS HERE" メッセージのようなものを body clone に追加してから、iframe body をそのコピーで置き換えます。

また、ブラウザーに http://getsatisfaction.com をロードし、iframe にhttp://getsatisfaction.com/explore/product-innovationをロードして、同じ結果を確認しました。上記の手順を繰り返すと、「JAMES WAS HERE」というメッセージが表示されました。

**私が遭遇した最も重大な問題は、コピーに JavaScript または CSS スタイル タグを残すことができないことでした。スタイリングの解決策は、本文を iframe に戻す前にすべてのスタイル変更を行うことです。**

何らかの理由で、ブラウザが JavaScript を実行しようとしてエラーをスローしました。これらのエラーのコンテキストから、JavaScript が iframe コンテキストではなくトップレベル コンテキストで実行されているのではないかと思いました。これはあなたにとってショーストッパーかもしれません。ポップアップ ウィンドウまたはインラインでプレビューを表示するには、別の計画を立てる必要がある場合があります。また、これは異なる JavaScript を使用する異なる Web サイトでは異なる動作をする場合があります。また、IE で奇妙な動作をする場合があります。

要するに、iframe で JavaScript を削除する必要があるため、このソリューションが実稼働 Web サイトをサポートするものであるとは実際には考えていません。ただし、JavaScript を使用するために iframe DOM が必要ない場合は、必要に応じて、本番環境でこれを機能させることができる場合があります。

それでも、これは興味深い問題でした。

于 2012-04-08T06:29:51.660 に答える