谷歌浏览器保存的某些页面的 html 文件无法正常显示

Posted 2023-05-08

【中文标题】谷歌浏览器保存的某些页面的 html 文件无法正常显示

【英文标题】：Google Chrome saved html files of some pages don't show properly

【发布时间】：2018-07-25 11:17:50

【问题描述】：

我不记得这是否可行，但我在下载某些页面 html 文件时遇到了问题，它们无法在 Google Chrome 上正确显示。但是，如果我在其他浏览器（例如 Microsoft Edge 或 Internet Explorer 本身）上打开它们，我可以毫无问题地看到该页面。

我要用https://developer.valvesoftware.com/wiki/Main_Page做一个例子

转到该页面，您应该会看到它默认的外观。

现在这是下载它的 html 后的样子（带文件夹的完整 html），然后用谷歌浏览器打开它。

但如果我在 Internet Explorer 上打开它，它根本不应该是这样的。

正如您在 Internet Explorer 上看到的，它在 Microsoft Edge 上看起来也一样，可能是一些小东西没有显示出来，但这些都可以。

错误：

[Deprecation] CSS cannot be loaded from `file:` URLs unless they end in a `.css` file extension.
Valve%20Developer%20Community.html:12 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "file:///C:/Users/user/Downloads/Valve%20Developer%20Community_files/load(1).php".
load.php:1 Uncaught ReferenceError: mw is not defined
    at load.php:1

(anonymous) @ load.php:1
Valve%20Developer%20Community.html:13 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "file:///C:/Users/user/Downloads/Valve%20Developer%20Community_files/screen.less".
load(2).php:17 GET file:///C:/w/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=valve&version=20141001T014210Z net::ERR_FILE_NOT_FOUND

(anonymous) @ load(2).php:17
load(3).php:154 GET file:///C:/w/load.php?debug=false&lang=en&modules=jquery.client%2Ccookie%2CmwExtension%2Cthrottle-debounce%7Cmediawiki.legacy.ajax%2Cwikibits%7Cmediawiki.notify%2Ctoc%2Cutil%7Cmediawiki.page.startup%7Cskins.vector.js&skin=valve&version=20171215T202648Z&* net::ERR_FILE_NOT_FOUND
addScript @ load(3).php:154
doRequest @ load(3).php:158
work @ load(3).php:160
request @ load(3).php:157
load @ load(3).php:164

(anonymous) @ Valve Developer Community.html:34
Valve Developer Community.html:255 GET file:///C:/w/skins/common/images/wiki.png net::ERR_FILE_NOT_FOUND

load(3).php:154 GET file:///C:/w/load.php?debug=false&lang=en&modules=jquery.checkboxShiftClick%2Chidpi%2ChighlightText%2CmakeCollapsible%2Cmw-jump%2Cplaceholder%2Csuggestions%7Cmediawiki.action.view.postEdit%7Cmediawiki.api%2Ccldr%2Chidpi%2CjqueryMsg%2Clanguage%2CsearchSuggest%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.collapsibleNav&skin=valve&version=20171215T202648Z&* net::ERR_FILE_NOT_FOUND
addScript @ load(3).php:154
doRequest @ load(3).php:158
work @ load(3).php:160
request @ load(3).php:157
load @ load(3).php:164

(anonymous) @ Valve Developer Community.html:259
Valve Developer Community.html:1 Failed to load https://developer.valvesoftware.com/w/index.php?action=ajax: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not 

但是为什么谷歌浏览器不能正确显示呢？在 Icognito 模式下它也无法正确显示，这不是因为看起来的设置，您可以尝试自己复制它来查看。

我希望你能帮助我。

【问题讨论】：

检查浏览器的开发者控制台是否有错误。我敢打赌，在非 HTTPS 页面或类似的页面上会有一些关于 HTTPS 资产的内容。

添加了我在控制台中发现的错误

【参考方案1】：

这看起来很清楚，并且肯定会解释屏幕截图中显示的行为：

不能从 file: URL 加载 CSS，除非它们以 .css 文件扩展名结尾。

【讨论】：

它没有说明是哪个文件，我只有一个以 .css 结尾的文件，我仍然不知道 Internet Explorer 是如何制作的。

IE 和 Chrome 经常有不同的 URL 来处理这类事情。在源代码中查找任何引用非.css CSS 文件的<link> 标签。

你的意思是像开发工具中的 Tab Source 一样？