0

我试图在我的 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 中加载的？我的代码中有什么做错了吗？

4

3 回答 3

4

此行有语法错误：

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\" />");
于 2012-12-22T18:15:23.713 回答
3

尝试：

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" />');
  }
}());
于 2012-12-22T18:53:13.233 回答
2

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

于 2012-12-22T18:31:26.883 回答