jquery或vanilla javascript自动加载(jquery加载)页面

时间:2017-09-25 18:13:45

标签: javascript jquery html jquery-load

我看到了下载链接的选项,但没有找到所有链接的自动下载。

我需要自动加载,使用jquery加载或ajax或http请求或loadPageSection并不重要。任何选择都没问题。

首先,我在每个链接上提出了最简单的点击模拟版本。

$(function() {
  document.querySelector('.className').click();
});

$("a").click(function() {
  $("#pageLoad").load($(this).attr("href"));
  return false;
});

但是,它可以作为重定向,重定向到第一页。 接下来,我替换了每个(function()上的点击,一切正常,但直到现在只加载了第一页

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
  $('a').each(function() {
    $(".pageLoad").load($(this).attr('href') );
  });
});
</script>
<table align="center">
  <tr><td>
  <a href="test.html" class="className">first</a>
  <div class="pageLoad"></div></td><td>
  <a href="test1.html" class="className">second</a>
  <div class="pageLoad"></div></td><td>
  <a href="test.html" class="className">third</a>
  <div class="pageLoad"></div></td></tr>
</table>

必须加载所有页面。每个<a href下 理想情况下,不应该有一个<div class = "pageLoad">,所有内容都应该自动生成一个div,并可能作为一个孩子添加。

最重要的是,jQuery可以使用load ('test.html #target');下载所需的元素,现在该怎么做?

$(". pageLoad").load($ (this #target).attr ('href'));不起作用?

在这种情况下如何下载所需的片段?

最后一个:如果加载的页面中还有链接,会有任何问题吗?现在,虽然所有装载1次都没有问题。

必须为页面上的所有链接加载链接的内容一次。

这些问题的解决方案对我来说太复杂了。

更新

<script>
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=windows-1251');
},
});

$(function () {
$('a').each(function() {
$(this).parent().find(".pageLoad").load($(this).attr('href') + ' #inf-1751');
});
});
</script>

我修复了编码的显示。 最后一个问题是在元素上使用锚点。如果你只是添加 锚点,然后加载页面的副本,如果到另一个页面,锚点也不起作用,加载整个页面。

1 个答案:

答案 0 :(得分:-1)

如果您想将每个页面加载到每个与链接相关的容器.pageLoad中,那么它可能看起来像那样。

$('a').each(function() {
   $(this).parent().find(".pageLoad").load($(this).attr('href') );
});

如果您想在飞行中添加.pageLoad

$('a').each(function() {
   $(this).after('<div class="pageLoad"/>').load($(this).attr('href'));
});

无需手动添加.pageLoad

<table align="center">
  <tr>
    <td>
       <a href="test.html" class="className">first</a>
    </td>
    <td>
       <a href="test1.html" class="className">second</a>
    </td>
    <td>
       <a href="test.html" class="className">third</a>
    </td>
  </tr>
</table>