javascript - 文件加载到浏览器后去掉href的路径

Question

当我加载网页并查看源代码时，我可以看到

<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"/>

如果我在浏览器的地址栏中输入www.example.com/css/bootstrap/bootstrap.min.css，那么我就可以看到整个css文件。

有什么方法可以在文件加载到浏览器后去掉 href 的路径，例如 css/bootstrap/bootstrap.min.css 变成 bootstrap. min.css？

感谢任何帮助。

谢谢

Answer 1

Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?

没有。大多数浏览器通过从服务器重新请求页面(可能来自缓存，也可能不来自缓存)来实现“查看源代码”，然后准确地显示该文本；您没有机会运行客户端代码来删除 link 或 style 元素(并且它必须是客户端代码，因为您自然可以'不要在服务器端执行此操作，并且仍然可以针对正常请求正确呈现页面)。

即使您可以在显示“查看源代码”之前运行客户端代码，您也无法使用 CSS 执行此操作:更改或删除 link 元素将删除与它。即使您可以(猜测一下您这样做的原因)，也不会阻止任何人通过最微不足道的努力来查看您的 CSS。

您可以在页面上使用 JavaScript 执行类似的操作(一旦运行，您可以完全删除 script 标记，它不会影响它加载的代码)，但不能使用 CSS，并且这只会阻止人们在调试工具中看到脚本元素，而不是“查看源代码”。

<小时/>

Any pointers on removing the JavaScript tags...

当然，因为您使用的是 jQuery，所以就像输入一样简单:

$("script").remove();

...在所有其他脚本代码运行后运行的代码中。这是一个例子:

$(".dp").datepicker();
$("script").remove();

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>
  Pick a date: <input type="text" class="dp">
</label>

请注意，即使我们从 DOM 中删除了 jQuery 和 jQuery UI script 元素，jQuery UI 日期选择器仍然可以工作。但同样，它们仍然存在于“查看源代码”中，因为上面是客户端代码。