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

我试图做到这一点,当我点击一个HTML页面中的链接,它dynamic加载请求的页面到一个与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> 

有一个名为pjax的jQuery插件说:“这是一个真正的永久链接,页面标题和完全降级的工作返回button的Ajax。

该插件使用HTML5 pushState和AJAXdynamic更改页面,而不是满载。 如果不支持pushState,PJAX会执行整页加载,确保向后兼容。

pjax所做的就是监听指定的页面元素,如<a> 。 然后,当调用<a href=""></a>元素时,将使用X-PJAX标头或指定的片段来获取目标页面。

例:

 <script type="text/javascript"> $(document).pjax('a', '#pjax-container'); </script> 

将这段代码放在页面标题中将监听文档中的所有链接,并设置您从新页面中获取的元素,并replace当前页面。

(这意味着你想用远程页面中的#pjax-containerreplace当前页面上的#pjax-container

当调用<a> ,它将获取请求头X-PJAX的链接,并在结果中查找#pjax-container的内容。 如果结果是#pjax-container ,则当前页面上的容器将被replace为新的结果。

 <!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不是在响应中find的第一个元素,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 

如果你不能改变服务器端代码,那么片段选项是一个select。

 $(document).pjax('a', '#pjax-container', { fragment: '#pjax-container' }); 

请注意, fragment是一个较老的pjax选项,似乎是获取所请求元素的子元素。

JQuery加载工作,但它会从源页面中去除JavaScript和其他元素。 这是有道理的,因为你可能不想在你的页面上引入坏脚本。 我认为这是一个限制,因为你正在做整个页面,而不是源页面上的一个div,你可能不想使用它。 (我不确定关于CSS,但我认为它也会被剥离)

在这个例子中,如果您在源页面的主体周围放置标签,它将抓住标签之间的任何内容,并且不会去除任何东西。 我用和包装我的源页面。

这个解决scheme将抓住上述分隔符之间的一切。 我觉得这是一个比简单的负载更强大的解决scheme。

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

试试这个:

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

我想这会做到这一点:

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

我想你正在寻找Jquery Load函数。 如果你愿意的话,你可以使用一个onclick函数绑定到一个标签或一个button。

你可以使用jQuery的getJSON()或Load(); 与后者,你可以引用一个现有的HTML文件。 有关更多详细信息,请参阅http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a

你可以通过选项

尝试一些修改

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