使用 jQuery 将 HTML 页面动态加载到 div 中
Posted
技术标签:
【中文标题】使用 jQuery 将 HTML 页面动态加载到 div 中【英文标题】：Load HTML page dynamically into div with jQuery 【发布时间】：2013-02-06 18:01:34 【问题描述】：我正在尝试这样做，当我点击 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>
【问题讨论】：
你有一个开始的iframe标签，后面跟着一个结束的div标签
【参考方案1】：
有一个名为 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 选项，似乎用于获取请求元素的子元素。
【讨论】：
【参考方案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);
);
【讨论】：
【参考方案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>
【讨论】：
这只会将src-attribute 添加到 div 中。
这仅在#content 是 iframe 或加载网站是非外部网站时有效。
他的所有页面都是本地的，所以在 div 中加载这些页面不会有任何问题。【参考方案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，你可以只使用<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>
【讨论】：
【参考方案5】：我认为您正在寻找Jquery Load 函数。如果您愿意，您只需将该函数与绑定到 a 标签或按钮的 onclick 函数一起使用。
【讨论】：
【参考方案6】：你可以使用 jQuery 的 getJSON() 或 Load();使用后者，您可以引用现有的 html 文件。更多详情请见http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a
【讨论】：
【参考方案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 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 src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
【讨论】：
以上是关于使用 jQuery 将 HTML 页面动态加载到 div 中的主要内容，如果未能解决你的问题，请参考以下文章
JQuery 动态加载 HTML 元素时绑定点击事件无效问题
将 HTML 动态附加到 Div 后，Jquery Mobile Slider 不滑动
如何使用 jquery 将动态创建的 img 元素加载到 HTML5 画布中