Question

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

在我的wordpress博客中，我使用的是在网址中查找？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

此行有语法错误：

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\" />");

Answer 2

尝试：

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

Answer 3

如果您坚持使用document.write，请记得在不久之后调用document.close（）onload。

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

3 个答案: