9

生成されたドキュメントをブラウザの履歴に保存したくないので、データ URI の使用を避けようとしています。HTML ドキュメント全体をその場で置き換えることは可能ですか?

を試しjQuery("html").html("<html>....</html>")ましたが、style情報が保存されません。

4

2 に答える 2

15

あなたはおそらくこれをしたいでしょう：

jQuery("body").html("new content");

... where に"new content"は、要素内に通常表示されるマークアップのみが含まれbody、残りは含まれないことが理想的です。これにより、body 要素のコンテンツが置き換えられますが、head(スタイル シート情報など) はそのまま残ります。タイトルも更新したい場合は、document.title = "new title";

編集要素内のすべてhtmlを置き換えること、それが機能するかどうか、および何が起こるかについて疑問に思いました。だから私はこれをしました：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('html').html(
            "<head><\/head>" +
            "<body>" +
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>" +
            "<\/body>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

head結果は非常に興味深いものでした — 最終的に、 orbody がまったくなく、内部にandhtmlの子孫があるだけの DOM 構造になりました。これがおそらく、新しいコンテンツの (新しい) スタイルを台無しにしている原因です。私は本質的に同じ結果設定を直接取得します（これがjQueryで機能しない理由かもしれません.jQueryは可能な場合は使用しますが、できない場合はそうしないことについては非常に洗練されています）; 一方、 and を介してand要素を明示的に作成して同様のことを行うと、機能します。headbodyinnerHTMLinnerHTMLheadbodydocument.createElementdocument.appendChild

これらはすべて、これが価値以上の労力であることをほぼ確実に意味します。

ただし: and要素の内容を変更してもうまくいくように見えることに注意してください:headbody

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('head').html(
            "<style type='text/css'>\n" +
            "body { color: green; }\n" +
            "<\/style>\n"
        );
        $('body').html(
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

そのため、読み込んでいる「ページ」を頭と体の部分に分ければ、その場で簡単に更新できます。

于 2010-05-13T09:26:52.210 に答える
2

jquery なし:

var newString = [
      "<!doctype html>"
    , "<html>"
    , "<head>"
    , "</head>"
    , "<body>"
    , "<h1>new content</h1>"
    , "</body>"
    , "</html>"
].join("");

document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;
于 2015-06-03T01:38:00.657 に答える