jquery 或 vanilla javascript 自动加载（jquery 加载）页面中的所有链接内容

Posted 2023-05-08

【中文标题】jquery 或 vanilla javascript 自动加载（jquery 加载）页面中的所有链接内容

【英文标题】：jquery or vanilla javascript auto load(jquery load) all link content in page

【发布时间】：2018-03-06 19:16:27

【问题描述】：

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

我需要自动加载，使用 jquery load 或 ajax 或 http request 或 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>

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

【问题讨论】：

所以你想将页面加载到每个单独的 div 中？

虽然对于每个人来说，拥有一个通用功能会更好，但对我来说已经足够了，这样的结果，总是使用正则表达式添加一个 div 或通过相当容易的创建。

我相信我明白了，请查看我的更新答案。

【参考方案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>