16

HTMLページのリンクをクリックすると、要求されたページがjQueryを使用してdivに動的に読み込まれるようにしようとしています。

どうやってやるの？

<html>
<head>
<script type="text/javascript">
    // what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>

<a href="page1.html">Page 1</a><br />
<a href="page2.html">Page 2</a><br />
<a href="page3.html">Page 3</a><br />
<a href="page4.html">Page 4</a><br />
<a href="page5.html">Page 5</a><br />
<a href="page6.html">Page 6</a><br />
</body>
</html>
4

7 に答える 7

14

pjaxと呼ばれる jQuery プラグインがあり、それは次のように述べています。

このプラグインは、HTML5 pushState と AJAX を使用して、全ロードなしでページを動的に変更します。pushState がサポートされていない場合、PJAX は完全なページの読み込みを実行し、下位互換性を確保します。

pjax が行うことは、 などの指定されたページ要素をリッスンすること<a>です。次に、<a href=""></a>要素が呼び出されると、X-PJAXヘッダーまたは指定されたフラグメントのいずれかでターゲット ページがフェッチされます。

例：

<script type="text/javascript">
  $(document).pjax('a', '#pjax-container');
</script>

このコードをページ ヘッダーに配置すると、ドキュメント内のすべてのリンクがリッスンされ、新しいページから取得して現在のページで置き換える要素が設定されます。

#pjax-container（現在のページを#pjax-containerリモートページから置き換えたいことを意味します）

が<a>呼び出されると、リクエスト ヘッダーを含むリンクが取得され、結果でX-PJAXのコンテンツが検索されます。#pjax-container結果が の場合#pjax-container、現在のページのコンテナは新しい結果に置き換えられます。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.pjax.js"></script> 
  <script type="text/javascript">
    $(document).pjax('a', '#pjax-container');
  </script> 
</head>
<body>
  <h1>My Site</h1>
  <div class="container" id="pjax-container">
    Go to <a href="/page2">next page</a>.
  </div>
</body>
</html>

が応答で見つかった最初の要素でない場合#pjax-container、PJAX はコンテンツを認識せず、要求されたリンクで全ページの読み込みを実行します。これを修正するには、サーバー バックエンド コードを send のみに設定する必要があります#pjax-container。

のサーバー側コードの例page2:

//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
  Go to <a href="/page1">next page</a>.
</div>
//else send full page

サーバー側のコードを変更できない場合は、フラグメント オプションが代替手段になります。

$(document).pjax('a', '#pjax-container', { 
  fragment: '#pjax-container' 
});

これfragmentは古い pjax オプションであり、要求された要素の子要素をフェッチするように見えることに注意してください。

于 2013-02-07T02:18:06.433 に答える
6

JQuery の読み込みは機能しますが、ソース ページから JavaScript やその他の要素が取り除かれます。ページに悪いスクリプトを導入したくない場合があるため、これは理にかなっています。これは制限だと思います。ソース ページの div だけでなく、ページ全体を実行しているため、使用したくない場合があります。（CSSについてはよくわかりませんが、それも削除されると思います）

この例では、ソース ページの本文の周りにタグを配置すると、タグの間にあるものはすべて取得され、何も取り除かれません。ソースページを and でラップします。

このソリューションは、上記の区切り文字の間のすべてを取得します。単純なロードよりもはるかに堅牢なソリューションだと思います。

  var content = $('.contentDiv');
    content.load(urlAddress, function (response, status, xhr) {
        var fullPageTextAsString = response;
        var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart />"), fullPageTextAsString.indexOf("<jqueryloadmarkerend />"));
        content.html(pageTextBetweenDelimiters);
    });
于 2013-02-06T18:14:39.900 に答える
5

これでうまくいくと思います：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

         $(".divlink").click(function(){
         $("#content").attr("src" , $(this).attr("ref"));

});

});
</script>
</head>
<body>
<iframe id="content"></iframe>

<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>

ちなみに、Jquery を回避できる場合は、要素のtarget属性を使用できます。<a>

<html>
<body>
<iframe id="content" name="content"></iframe>

<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html>
于 2013-02-06T18:12:54.810 に答える
5

これを試してください：

$(document).ready(function(){
  $('a').click(function(e){
     e.preventDefault();
     $("#content").load($(this).attr('href'));
  });
});

このライブラリを最初に呼び出すようにしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
于 2013-02-06T18:04:53.533 に答える
3

Jquery Load関数を探していると思います。必要に応じて、タグまたはボタンに関連付けられた onclick 関数でその関数を使用するだけです。

于 2013-02-06T18:03:24.453 に答える
1

jQuery の getJSON() または Load(); を使用できます。後者では、既存の html ファイルを参照できます。詳細については、http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-aを参照してください。

于 2013-10-03T17:54:39.253 に答える
1

オプションでできます

いくつかの変更でこれを試してください

<div trbidi="on">
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == '')
{contenedor.innerHTML = '';
} else{
var url = idYouTube;
contenedor.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ url +'" frameborder="0" allowfullscreen></iframe>';
}
}
</script>


<select onchange="MostrarVideo(this.value);">
<option selected disabled>please selected </option>
<option value="qycqF1CWcXg">test1</option>
<option value="hniPHaBgvWk">test2</option>
<option value="bOQA33VNo7w">test3</option>
</select>
<div id="divInnerVideo">
</div>

id="divInnerVideo"内にデフォルトのページを置きたい場合

例：

<div id="divInnerVideo">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
于 2015-12-03T16:07:20.267 に答える