javascript - 使用 document.write 加载不同的 css 样式表时，浏览器无限刷新

Question

我想在我的 wordpress 博客上使用两个不同的样式表，这样当通过网络访问页面时使用一个样式表，而当通过我们的 iOS 应用程序访问博客内容时使用另一个样式表。现在我们将 ?app=true 附加到我们的 iOS 应用程序的 URL 请求中，希望在我们的博客中我们可以搜索这个字符串并加载不同的样式表。我们正在使用 JSON API 插件，以便我们的 iOS 应用程序能够以编程方式提取我们的博客文章，并在 iOS 应用程序的 WebView 中显示它们。

在我的 wordpress 博客中，我使用 javascript 在 URL 中查找 ?app=true，如果是，则加载不同的样式表。

<script language="javascript" type="text/javascript">
    var location = window.location.href;
if(location.indexOf("?app=true") > -1) {        
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");
}
</script>

此代码位于我的 wordpress 主题的 header.php 文件的标签内。

我尝试使用的样式表称为 appstyle.css，与 header.php 位于同一目录中。

我遇到的问题是，使用此代码它会无限地重新加载浏览器页面。问题似乎与 document.write 函数有关，因为没有该函数网页加载正常(尽管它显然没有加载 appstyle.css 样式表)。

我也试过这个 if 语句:

if(window.location.search.indexOf('?app=true') === 0) 

但似乎并没有什么不同。

是否有更好的方法来加载不同的样式表，具体取决于它是在 iOS 应用程序中还是在 Web 中加载？我的代码有什么地方做错了吗？

Answer 1

尝试:

location === window.location

在控制台中。

它将输出true。这表明全局变量 location 已经设置并指向当前 location window 的对象.使用您的代码，您可以通过分配一个新值来更改该变量，这会触发浏览器重新加载。

要修复它，只需为您的变量使用另一个名称，例如:

var currentLocation = window.location.href;

或者将您的代码放在一个自执行函数中，以将其与全局范围分开:

(function (){
  var location = window.location.href;
  if(location.indexOf('?app=true') > -1) {        
    document.write('<link rel="stylesheet" type="text/css" href="appstyle.css" />');
  }
}());