发表新帖
发表新帖

Missing stylesheets/scripts/images when using BASE element for a local html file rendered in IE8 in IE8 standards mode

后端 未结
关注
2 908
深忆病人
深忆病人 2021-01-05 22:04

We have some HTML pages (local, not on a web server) that use the BASE element to identify a specific base directory that contains a bunch of common stylesheets and images.

相关标签:
2条回答
  • 生来不讨喜
    2021-01-05 22:21

    Status Update:   Use: <base href="\\c:\temp\resources\" />

    Here's the process I used in creating this solution to allow IE8 to use the Base Attribute for local files.

    To clarify: This W3C validated solution works for IE7, IE8 and all modern browsers!


    Reference Screenshot::
    Here you can see that IE8 Address Bar does not operate like the other modern browsers: The slashes are reversed and there is no file:/// protocol seen. However, IE8 will show the file:/// protocol in the Browser's Status Bar upon page refresh!

    enter image description here

    Reference Screenshot:
    Since IE8 is treating Local Files differently, understanding the IE8 protocol for file:/// is important.

    To realize what syntax methods are available, viewing Internet Options (Security Tab) for Local Intranet will give us that info. No changes are actually done here, just the syntax please:

    enter image description here

    In the above photo, the Local Intranet Window confirms that backslashes are required.

    Also, it shows that the file:\\ protocol is associated with this slash syntax. Since file:/// protocol is implied automatically by IE8 (previously mentioned: see Browser's Status Bar and note slashes are rendered correct!!).

    Defining this file: protocol in the Base tag is the issue. The solution is not to use a protocol!


    Reference Link 1: Protocol-less URL Scheme:

    It’s not exactly light reading, but section 4.2 of RFC 3986 provides for fully qualified URLs that omit protocol (the HTTP or HTTPS) altogether. When a URL’s protocol is omitted, the browser uses the underlying document’s protocol instead.


    Reference Link 2: Understanding Network Path Reference by Paul Irish:

    *Of course, if you're viewing the file locally, it'll try to request the file with the file:// protocol.


    The references above explain that using // will allow any browser to use the currently known URL Scheme when accessing files or assets. Since IE8 is the game changer, using \\ instead of // will work for the Base tag since all browsers will convert/interpret that as the standard file:/// URL Scheme (local files implied), including browser IE7!


    Complete HTML Markup | The working DEMO: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Using Base Tag with Local Files IE8 and Modern Browser DEMO</title>

  <!-- The name of this file is:  test.html  -->
  <!-- The location of this HTML file on the hard drive is:  C:\temp\html\test.html  -->

  <!-- This unusually constructed Base attribute tag uses two rules to have it work for Locally Hosted IE8 Files that are not server based. -->
  <!-- First, the "URL Scheme" is based on "Network Path Reference" which means no Protocol is used. -->
  <!-- Second, the "forward slashes" are changed to "back slashes". It's the syntax IE8 actually expects. -->
  <!-- This entire method is also friendly for modern browsers showing these local files that are not server based. -->
  <base href="\\c:\temp\resources\" />

</head>
<body>

  <p>
    <!-- The location of this "image.jpg" on the hard drive is at:  C:\temp\resources\image.jpg  -->
    <img src="image.jpg" alt="image" />
  </p>

</body>
</html>
    0 讨论(0)
  • 醉梦人生
    2021-01-05 22:35

    Unfortunately, it looks like IE8's standards mode does not handle file:// URI's in the BASE element.

    If you can run script inside your local pages, I'd suggest you use some simple javascript to loop through all your external elements (SCRIPT, IMG, LINK, IFRAME, FRAME) and fix up any scheme-less URIs (the ones that don't contain "://") using your desired BASE.

    0 讨论(0)
 看不清?
提交回复
热议问题