Динамически загружать HTML-страницу в div с помощью jQuery

Я пытаюсь сделать это, когда я нажимаю ссылку на странице HTML, она динамически загружает запрошенную страницу в div с помощью jQuery.

Как я могу это сделать?

<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>

Ответы

Ответ 1

Там есть плагин jQuery под названием pjax, в котором говорится: "Это ajax с настоящими постоянными ссылками, названиями страниц и рабочей кнопкой, которая полностью ухудшается".

Плагин использует 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 не будет распознавать содержимое и выполнять полную загрузку страницы по запрашиваемой ссылке. Чтобы исправить это, код сервера должен быть настроен только на отправку #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 и появляется для получения дочернего элемента запрашиваемого элемента.

Ответ 2

Загрузка JQuery работает, но она будет выделять javascript и другие элементы со страницы источника. Это имеет смысл, потому что вы можете не захотеть ввести плохую страницу script на свою страницу. Я думаю, что это ограничение, и поскольку вы делаете целую страницу, а не только div на исходной странице, вы можете не захотеть ее использовать. (Я не уверен насчет css, но я думаю, что он тоже будет лишен)

В этом примере, если вы поместите тег вокруг тела вашей исходной страницы, он будет захватывать что-либо между тегами и не будет лишать ничего. Я завершаю исходную страницу с помощью и.

Это решение будет захватывать все между указанными разделителями. Я считаю, что это гораздо более надежное решение, чем простая загрузка.

  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);
    });

Ответ 3

Попробуйте следующее:

$(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>

Ответ 4

Я думаю, что это сделало бы это:

<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>

Ответ 5

Я думаю, что вы ищете функцию Jquery Load. Вы бы просто использовали эту функцию с функцией onclick, привязанной к тегу или кнопке, если хотите.

Ответ 6

Вы можете использовать jQuery getJSON() или Load(); с последним вы можете ссылаться на существующий html файл. Для получения дополнительной информации см. http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a

Ответ 7

Вы можете использовать вариант

Попробуйте это с некоторыми изменениями

<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>