比较来自世界各地的卖家的域名和 IT 服务价格

动态下载页面 HTML 在 div 通过 jQuery

我正在努力这样做,当我点击页面上的链接时 HTML, 它动态下载所请求的页面 div 从 jQuery.

我怎样才能做到这一点?


<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>
已邀请:

二哥

赞同来自:

有一个插件 jQuery 题为
https://github.com/defunkt/jquery-pjax
, 这说: "这是 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 src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.pjax.js" type="text/javascript"></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 显然,检索所请求元素的子元素。
</a></a>

二哥

赞同来自:

JQuery load 工作,但他会删除 javascript 和来自源页面的其他元素。 它是有道理的,因为您可能不想向页面引入坏脚本。 我认为这是一个限制,自从你制作整个页面,而且不仅仅是 div 在源页面上,您可能不想使用它。 /我不确定 css, 但我认为他也将分发/

在此示例中,如果将标记放在源页面的正文周围,它将捕获标记之间的所有内容,并且不会删除任何内容。 我用我包装自己的源页面。

该决定将捕获上述分隔符之间的一切。 我觉得这是一个比简单的负载更可靠的解决方案。


var content = $/'.contentDiv'/;
content.load/urlAddress, function /response, status, xhr/ {
var fullPageTextAsString = response;
var pageTextBetweenDelimiters = fullPageTextAsString.substring/fullPageTextAsString.indexOf/"<jqueryloadmarkerstart></jqueryloadmarkerstart>"/, fullPageTextAsString.indexOf/"<jqueryloadmarkerend></jqueryloadmarkerend>"//;
content.html/pageTextBetweenDelimiters/;
}/;

詹大官人

赞同来自:

尝试:


$/document/.ready/function//{
$/'a'/.click/function/e/{
e.preventDefault//;
$/"#content"/.load/$/this/.attr/'href'//;
}/;
}/;


而且别忘了第一次打电话给这个图书馆:


<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">]https://ajax.googleapis.com/aj ... gt%3B[/url]
</script>

卫东

赞同来自:

我认为它会这样做:


<html>
<head>
<script src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"]http://ajax.googleapis.com/aja ... ot%3B[/url] type="text/javascript"></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 class="divlink" href="#" ref="page1.html">Page 1</a><br/>
<a class="divlink" href="#" ref="page2.html">Page 2</a><br/>
<a class="divlink" href="#" ref="page3.html">Page 3</a><br/>
<a class="divlink" href="#" ref="page4.html">Page 4</a><br/>
<a class="divlink" href="#" ref="page5.html">Page 5</a><br/>
<a class="divlink" href="#" ref="page6.html">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>


</a>

石油百科

赞同来自:

我想你正在寻找
http://api.jquery.com/load/
Jquery. 您只需使用此功能功能 onclick, 绑在标签上 a 或者如果需要按钮。

詹大官人

赞同来自:

您可以使用 jQuery getJSON// 或者 Load//; 最后,您可以参考现有文件。 html. 有关更多信息,请参阅
http://www.codeproject.com/Art ... nto-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="[url=https://www.youtube.com/embed]https://www.youtube.com/embed[/url]/'+ url +'" frameborder="0" allowfullscreen></iframe>';
}
}
</script>
<select onchange="MostrarVideo/this.value/;">
<option disabled="" selected="">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 allowfullscreen="" frameborder="0" height="315" src="[url=https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&amp;showinfo=0"]https://www.youtube-nocookie.c ... ot%3B[/url] width="560"></iframe>
</div>


</div>

要回复问题请先登录注册