jquery 加载和直接 link 到 html 页面都使用相对路径

Question

在我的网站上，我使用链接在 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 页面上使用绝对路径，我可以加载它们，但这会导致 css 在 div 内（而不是在新选项卡上）加载链接时加载两次。

<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 页面仍然能够正确加载内容（不使用绝对路径如果可能的话）。

Answer 1

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

jquery 加载和直接 link 到 html 页面都使用相对路径

Use relative path for both jquery load and direct link to html page

html

jquery

load

relative-path

absolute-path