1

私は父の自動車教習所のウェブサイトを書き直し、不要なiframeと画像をhtml5とcss3のマークアップに変更し、javascriptとjqueryを介して機能を改善しています。

これで、すべてのメニュー項目（検索クローラー用）の全ページが作成されましたが、ヘッダーとメニューはほとんど同じままです。そのため、JavaScriptが有効になっているデバイスでリンクがクリックされたときに、履歴APIを使用してコンテンツとドキュメントのタイトルと説明を変更したいので、ページ全体を更新する必要はありません。

機能：-ターゲットページの#content divを取得し、それを現在のページにロードします-履歴APIを使用して新しいURLを表示し、popstateイベントを使用して前の状態に戻します-htmlヘッドのコンテンツを現在の状態から変更します資料

動作しないもの：-ターゲットドキュメントからhtmlヘッドを取得する

これには簡単な関数があるはずですよね？またはこれを行うための良い方法ですか？

4

2 に答える 2

1

同じオリジンにあるので、それができます。ajax を使用する場合、jQuery が舞台裏で行うことから何百万マイルも離れているわけではありませんが、少し厄介ですload(jQuery は ではなくドキュメント フラグメントを使用すると思いますiframe)。

基本的に、 off-page を作成し、iframeそこにコンテンツ ページをロードし、そこから必要なものを抽出できます。次のようになります (完全に最適化されていません)。

// I'm assuming you have a variable containing the content URL; I'll use `page`
var page = "/ocazuc/2";

// Create the iframe, put it off-page, and put it in the DOM
var iframe = $('<iframe>');
iframe.css({
  position: "absolute",
  left: -10000
}).appendTo(document.body);

// Hook the load event on it
iframe.load(function() {
  // Get the document
  var $doc = $(iframe[0].contentDocument.documentElement);

  // Steal its content
  $doc.find("body").contents().appendTo(document.body);

  // And use its title or whatever else you want from the `head`
  document.title = $doc.find('title').text();

  // Done with it
  iframe.remove();
});

// Start loading it
iframe[0].src = page;

実例| ソース

于 2013-03-12T15:31:31.970 に答える
0

受け入れられた回答の下にある私のコメントを参照してください。基本的に、そのアプローチを使用するとパフォーマンス上の懸念がいくつかあるため、より良いアプローチを探しました。そのために、Rails Turbolinks プロジェクトに見られるアプローチを採用しました。これは MIT のライセンスを受けて書かれた coffeescript です。ブラウザの互換性の問題のいくつかを回避したことで、彼らの功績が認められました。

https://github.com/rails/turbolinks

/*
 * A function that takes a string of HTML and returns a document object.
 */
var parseDocument = (function() {
    function createDocumentUsingParser(html) {
        return (new DOMParser()).parseFromString(html, 'text/html');
    }
    function createDocumentUsingDOM(html) {
        var doc = document.implementation.createHTMLDocument('');
        doc.documentElement.innerHTML = html;
        return doc;
    }
    function createDocumentUsingWrite(html) {
        var doc = document.implementation.createHTMLDocument('');
        doc.open('replace');
        doc.write(html);
        doc.close();
        return doc;
    }
    /*
     * Use createDocumentUsingParser if DOMParser is defined and natively
     * supports 'text/html' parsing (Firefox 12+, IE 10)
     * 
     * Use createDocumentUsingDOM if createDocumentUsingParser throws an exception
     * due to unsupported type 'text/html' (Firefox < 12, Opera)
     * 
     * Use createDocumentUsingWrite if:
     *  - DOMParser isn't defined
     *  - createDocumentUsingParser returns null due to unsupported type 'text/html' (Chrome, Safari)
     *  - createDocumentUsingDOM doesn't create a valid HTML document (safeguarding against potential edge cases)
     */
    var parser;
    if (window.DOMParser) {
        try {
            var testDoc = createDocumentUsingParser('<html><body><p>test');
            if (testDoc && testDoc.body && testDoc.body.childNodes.length === 1) {
                parser = createDocumentUsingParser;
            }
        } catch(ex) {
            parser = createDocumentUsingDOM;
        }
    }
    if (!parser) {
        parser = createDocumentUsingWrite;
    }
    return parser;
})();

次に、たとえば次のようなことができます。

var doc = parseDocument(wadOfHtml);
var title = doc.title;
var $content = $(doc).find('#content');

私はこのコードが機能するかどうかを自分で確認していないことに注意してください.railsプロジェクトの評判から外れています. また、coffeescript からの適応によって構文やその他のエラーが発生しなかったかどうかも確認していません。文字通り、まだ実行していません。私は単に楽観的です。

于 2013-04-29T23:24:47.730 に答える