it-swarm.com.ru

Динамически загружать 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> 
15
Saeed

Существует плагин 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 и, по-видимому, извлекает дочерний элемент запрошенного элемента.

14
hexacyanide

Загрузка JQuery работает, но она удалит JavaScript и другие элементы со страницы источника. Это имеет смысл, потому что вы можете не захотеть вводить плохой сценарий на своей странице. Я думаю, что это ограничение, и поскольку вы делаете целую страницу, а не просто 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);
    });
6
user957863

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

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

Попробуйте с этим:

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

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

3
nathan hayfield

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

1
B. Clay Shannon

Вы можете через опция

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

<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>
1
sn ps