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

Question

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

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

<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 已经设置并指向window 的当前location 对象。使用您的代码，您通过分配一个新值来更改该变量，这会触发浏览器重新加载。

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

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" />');
  }
}());

Answer 2

如果您坚持使用 document.write，请记住在加载或稍后调用 document.close()。

Answer 3

此行有语法错误：

document.write("<link rel="stylesheet" type="text/css" href="appstyle.css" />");

尝试将其更改为：

document.write('<link rel="stylesheet" type="text/css" href="appstyle.css" />');

或者做适当的转义

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");