对 jquery 加载和直接链接到 html 页面使用相对路径答案

【问题标题】：Use relative path for both jquery load and direct link to html page对 jquery 加载和直接链接到 html 页面使用相对路径
【发布时间】：2019-05-18 16:06:42
【问题描述】：

在我的网站上，我使用链接在 div 中加载 html 页面。

<a class="iframe" href="portfolio/1/1.html">Link</a>

代码

$(".iframe").on("click", function() {
   var $mylink = $(this).attr('href');
   $div.load($mylink);
}

如果我在新选项卡中打开其中一个链接，css 和图像不会加载，因为我使用相对路径，因为 html 页面最终位于 div 中。通过在 html 页面上使用绝对路径，我可以加载它们，但是当链接在 div 内加载（而不是在新选项卡上）时，这会导致 css 加载两次。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen"/>
</head>

<body>
<div>
<img src="portfolio/1/1.jpg"/>
</div>
</body>
</html>

有没有办法只使用相对路径来解决这个问题？基本上我希望 html 页面像它们一样加载到 div 中，但是如果用户直接打开 html 页面仍然能够正确加载内容（如果可能，不使用绝对路径）。

【问题讨论】：

标签： jquery html load relative-path absolute-path

【解决方案1】：

使用基本标签指定基本网址。 html 文档中的所有相对链接都将相对于您的基础https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

【讨论】：

我必须在每个html页面上添加它吗？如果是这样，它与绝对路径有何不同？
您需要在要在新选项卡中工作的页面的 HEAD 部分中添加一次基本标记。如果没有基本标签，文档中的相对链接是相对于当前窗口位置的 - 因此，当在新选项卡中时，您的相对 css 链接例如指向 yourdomain.com/portfolio/1/css/main.css。使用基本集，所有相对链接都是相对于基本的，例如，如果您在 html 中将 yourdomain.com 设置为基本，则相对 css 链接指向 yourdomain.com/css/main.css 而与窗口位置无关。我希望这会有所帮助。
我刚试过，但它会产生与绝对路径相同的问题，当链接在 div 中加载时，css 会加载两次（我也在猜测图像）。
当链接加载到 div 中时，也许我可以使用 jquery 删除基本标签？
我的解决方案应该只帮助您的 CSS 和图像在新选项卡中工作。 iframe 不会受到包含它的页面中存在的样式表的影响，因此将再次加载该文件。大多数浏览器会从缓存中加载，而不是从服务器中获取。还是您的意思是 css 文件加载了 3 次 - 一次在父页面中，两次在 iframe 中？