使用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&showinfo=0" frameborder="0" allowfullscreen></iframe> </div>
