logo标签列表

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

javascriptjqueryhtmlcss
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>
2
你有一个开放的 iframe 标签，后面跟着一个闭合的 div 标签。 - Musa
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将无法识别内容并对所请求的链接执行完整页面加载。要解决此问题，需要设置服务器后端代码仅发送#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 选项，似乎会获取所请求元素的子元素。

6
JQuery的load方法可以使用，但它会从源页面中剥离javascript和其他元素。这是有道理的，因为您可能不希望在页面上引入糟糕的脚本。我认为这是一个限制，因为您正在处理整个页面而不仅仅是源页面上的div，所以您可能不想使用它。（我不确定CSS是否也会被剥离）
在这个例子中，如果您在源页面的body周围放置一个标签，它将获取标记之间的任何内容，并且不会剥离任何东西。我用 和 包装我的源页面。
这个解决方案将获取上述分隔符之间的所有内容。我觉得这比简单的load方法更加强大。
  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);
    });
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>
这将只是向div添加src属性。 - Chris
只有当 #content 是一个 iframe 或者加载的网站不是外部网站时，这个才能正常工作。 - Chris
他的所有页面都是本地的，因此在div中加载这些页面不会有任何问题。 - Jai
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，您可以直接使用<a>元素的target属性：

<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>
3
我认为您正在寻找Jquery Load函数。您只需将该函数与a标签的onclick函数或按钮绑定使用即可。
1
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接