Bootstrap - Internet Explorer - 路由参数问题答案

【问题标题】：Bootstrap - Internet Explorer - issue with route parametersBootstrap - Internet Explorer - 路由参数问题
【发布时间】：2015-04-04 21:26:04
【问题描述】：

我有几个页面在 Mozilla 和 Chrome 中可以正常工作，但在 IE8 中却不行。使用respond.js 解决了大部分问题。但是，当向页面传递参数时，问题就会浮出水面（页面以移动模式显示；占据整个页面宽度，导航栏折叠成图标栏）。但这仅在编辑模式下发生（作为参数传递的 id）。

例如，我有一个用户注册页面，它可以在两种模式（新模式和更新模式）下工作。对于更新，它使用附加了用户详细信息的相同视图。

这是两条路线。第一个用于新模式，第二个用于编辑模式。

Route::get('test', function() {
return View::make('test');
});

Route::get('test/1', function() {
return View::make('test');
});

这里是测试页面。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Main Layout">
  <link rel="stylesheet" href={ { asset( "/css/bootstrap.min.css") }} />
  <script src="/js/jquery-1.11.1.js"></script>
  <!--[if lt IE 9]>
        <script src="js/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <div class="wrap col-md-13">
    <!-- Wrap all page content here -->
    <nav>
      <div class="col-md-12">
        <div class="nav navbar" style="background-color:black;">
          <div class="navbar-header pull-left">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar" style="background-color:red;"></span>
              <span class="icon-bar" style="background-color:red;"></span>
              <span class="icon-bar" style="background-color:red;"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav pull-right">
              <li class="stft-menu-item"><a href="/">Home</a>
              </li>
              <li class="stft-menu-item"><a href="/">About</a>
              </li>
              <li class="stft-menu-item"><a href="/">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</body>
<script src="/js/bootstrap.min.js"></script>

</html>

现在，当我在新模式下使用第一条路线进行测试时，一切都很好。

http://localhost/test

但问题出现在以下方面。

http://localhost/test/1

请问有什么意见吗？

【问题讨论】：

标签： php twitter-bootstrap laravel

【解决方案1】：

<!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->

这需要更改为/js/respond.min.js（注意前导斜杠）。目前，当您查看http://localhost/test/1 URL 时，该文件引用将不起作用。或者，您可以（应该）改用 {{ asset('js/respond.min.js') }} 函数。 asset() 函数将为您的文件生成正确的 URL（就像您在 CSS 文件中使用它一样）。

编辑：您还链接到 jQuery 两次，这是不必要的，我假设只有其中一个引用有效。

保留这个（但将其移到<head></head> 标签内：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

删除这个：

<script src="/js/jquery-1.11.1.js"></script>

编辑 2：为什么此更改可以解决问题？

有两种方法可以链接到文件（JS、CSS、图像、其他页面——无论哪种类型）。

相对链接

例如js/respond.js

如果没有前导斜杠，浏览器会创建一个相对于您当前 URL 的链接。在您的情况下，当您查看http://example.com/test 时，链接js/respond.js 被假定为http://example.com/js/respond.js（这是正确的）。

但是，当您查看http://example.com/test/1 时，浏览器会假定一个相对于您当前路径的 URL。这意味着链接js/respond.js 被假定为http://example.com/test/js/respond.js（这是错误的）。

如果您要查看 http://example.com/admin/user/test/1，假定的 URL 将是 http://example.com/admin/user/test/js/respond.js。

绝对链接

例如/js/respond.js 或 http://www.example.com/js/respond.js

前导斜杠告诉浏览器它是一个绝对链接，并且应该使用完整的 URL 作为链接的基础来生成链接。这允许您从域中任何 URL 的文件链接，它会知道该目录是 http://example.com/js/respond.js

在所有 URL 上使用前导斜杠所带来的风险是，它假定您的网站在域的根目录中运行。如果您将来将您的网站移动到子目录（可能用于开发或登台环境），那么您的链接将不再有效。这就是为什么使用asset() 助手是个好主意。此函数将在您的链接前面加上文件的完整路径 asset('js/respond.js') 将在所有页面上正确生成 URL http://www.example.com/js/respond.js。

【讨论】：

非常感谢。它确实解决了这个问题。任何原因，为什么它适用于第一条路线而不适用于第二条路线。是的，我只使用了一个 jQuery 实例（第一个似乎是由代码 sn-p 添加的）。