Respond.js not working locally - Support for media queries in IE8

15k views Asked by At

I am writing a html page using bootstrap3 template and including the respond.js in that, but when I run it on IE8, it gives me error "Access is denied" in console. I am using this to make IE8 support media queries. I have tried a lot of things as given on forums, but no luck. Does respond.js works locally or we need to run on a localhost/web server?

Respond.js link - https://github.com/scottjehl/Respond

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/main.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
    <h1>Hello, world!</h1>

    <div class="main-cont">         
    </div>
</div>        
    <script src="js/jquery-1.10.2.min.js"></script>        
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS - main.css

.main-cont {background:#2d3a42; height:100px;}
2

There are 2 answers

3
whyAto8 On BEST ANSWER

I just managed to make respond.js run on IE8 for media queries support , by running on localhost. If simply the html file opened, it does not help.

0
Phil Nicholas On

Per the Respond.js Docs...

"Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server."

Specifically, "Respond.js re-requests the CSS files using Ajax and parses the text response," which is where IE's local security policy is blocking you. Another user elsewhere suggested changing the security settings in IE, but I can't confirm that solution since my copy of IE8 doesn't permit me to change those settings.

Oh, and to save you the trouble, I already tested and confirmed that using ajaxSetup() method in jQuery to set "isLocal" property to "true" won't overcome the local restriction in IE.