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 插件，它说：“它是带有真正永久链接、页面标题和完全降级的工作返回按钮的 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 选项，并且似乎获取请求元素的子元素。

于 2013-02-07T02:18:06.433 回答
6

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);
    });
于 2013-02-06T18:14:39.900 回答
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 回答
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 回答
3

我认为您正在寻找Jquery Load功能。如果您愿意，您只需将该函数与绑定到 a 标签或按钮的 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 回答