JavaScript - DingTalk Web バージョン管理のサイドナビゲーションバーが更新されず、コンテンツのみが更新されます。具体的なテクノロジは何ですか?-PHPチュートリアル-php.cn

JavaScript - DingTalk Web バージョン管理のサイドナビゲーションバーが更新されず、コンテンツのみが更新されます。具体的なテクノロジは何ですか?

WBOY

リリース： 2016-09-19 09:16:25

オリジナル

1913 人が閲覧しました

ナビゲーションバーが更新されず、コンテンツのみが更新されるDingTalk Webバージョン管理端末の具体的な技術は何ですか?

JavaScript - DingTalk Web バージョン管理のサイドナビゲーションバーが更新されず、コンテンツのみが更新されます。具体的なテクノロジは何ですか?

アドレスもそれに合わせて更新しますので、具体的な技術キーワードを教えてください。

簡単に言えば、vuejs を使用してこの効果を実現できますか?

返信内容:

ナビゲーションバーが更新されず、コンテンツのみが更新されるDingTalk Webバージョン管理端末の具体的な技術は何ですか?

アドレスもそれに合わせて更新しますので、具体的な技術キーワードを教えてください。

簡単に言えば、vuejs を使用してこの効果を実現できますか? JavaScript - DingTalk Web バージョン管理のサイドナビゲーションバーが更新されず、コンテンツのみが更新されます。具体的なテクノロジは何ですか?

HTML5 PushState + Ajax。

Ajax は部分更新を実装し、pushState は戻るを実装するためのブラウザの戻るボタンを含むアドレスバーの変更を実装します。このテクノロジーに基づいて実装された Pjax をご覧ください。

https://github.com/defunkt/jq...

アドレスバーは更新されましたか?

単一ページのアプリケーションでこの機能を簡単に実装できます。

js はページジャンプせずに単一ページのコンテンツを切り替えます

アヤックス？ ?

この記事で言及されていたような気がします

http://www.cnblogs.com/08shiy...

DingTalk にアクセスして確認すると、結果は次のとおりです。

1. ナビゲーションバーが更新されていないことがわかります (更新後、ナビゲーションの li を変更します)。、要求された HTML が返されます。これはページの一部ではなく全体です。

2. 中央の部分は非同期で読み込まれます。[開発ツール] で [JavaScript を無効にする] に移動すると、主に広告スライダーが読み込まれていることがわかります。
3. ほとんどすべての画像がキャッシュされているため、下部が更新されていないように見えます。ネットワークを確認すると、ステータスが 200 ではなく 304 になっています。

vueルーター

シングルページアプリケーションであっても、Vue などの他のライブラリであっても、原則は最終的には AJAX または PJAX であり、JS バックグラウンドを介してサーバーデータ (通常は json または xml データ) を非同期的にリクエストし、DOM を操作してデータを表示します。 js. 単一ページの Web サイトでは、History API を使用して URL を更新することもできます。
AJAX 実装リファレンス: AJAX。学ぶ余地はありませんが、取り入れていきたいと思います。

この会社のプロジェクトはこれに似ています。ポスターのアイデアは次のとおりです。まず、ナビゲーションバーのコンテンツが切り替わっても、ページは更新されず、右側のコンテンツ (iframe のコンテンツ) のみが変更されます。つまり、左側のナビゲーションバーのコンテンツが変更されると、右側の iframe タグの URL 値も変更されます。 js は、左側のナビゲーションバーの変更を監視し、その値を右側の iframe に動的に渡します。元の投稿者のお役に立てば幸いです

これは関連するメソッドです:

functionloadSubmenu(){

リーリー
}

function openItem(itemIndex, tab){

リーリー

}
/
ワークスペースを設定する

function setWorkspace(){
リーリー

}

これは関連する HTML dom です:

リーリー