Question

我正在尝试这样做，当我点击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>

Answer 1

有一个名为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将无法识别内容并在请求的链接上执行整页加载。要解决此问题，需要将服务器后端代码设置为仅发送#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选项，似乎是获取所请求元素的子元素。

Answer 2

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

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

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

Answer 5

我认为您正在寻找Jquery Load功能。如果你愿意的话，你可以使用与a标签或按钮相关联的onclick功能来使用该功能。

Answer 6

你可以使用jQuery的getJSON（）或Load（）;使用后者，您可以引用现有的html文件。有关详细信息，请参阅http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a

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

使用jQuery将HTML页面动态加载到div中

7 个答案: