javascript 使用document.write加载不同的css样式表时，浏览器无限刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14005272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When using document.write to load a different css stylesheet, browser refreshes infinitely
提问by Paul Javid
I am trying to have two different stylesheets on my wordpress blog, so that one stylesheet is used when the page is accessed via the web, and the other stylesheet is used when the blog content is accessed via our iOS app. Right now we are appending ?app=true to URL requests from our iOS app in hopes that in our blog we could search for this string and load a different stylesheet. We are using a JSON API plugin so that our iOS app can programmatically pull our blog posts and display them in a web view in the iOS App.
我试图在我的 wordpress 博客上使用两个不同的样式表，以便在通过 Web 访问页面时使用一个样式表，而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表。现在我们将 ?app=true 附加到来自我们 iOS 应用程序的 URL 请求，希望在我们的博客中我们可以搜索这个字符串并加载不同的样式表。我们正在使用 JSON API 插件，以便我们的 iOS 应用程序可以以编程方式拉取我们的博客文章并将它们显示在 iOS 应用程序的 Web 视图中。
In my wordpress blog I am using javascript that looks for ?app=true in the URL, and if so, load a different stylesheet.
在我的 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>
This code is placed within the tags in the header.php file of my wordpress theme.
此代码放置在我的 wordpress 主题的 header.php 文件中的标签内。
The stylesheet that I am trying to use is called appstyle.css and is located in the same directory as header.php.
我尝试使用的样式表称为 appstyle.css，与 header.php 位于同一目录中。
The issue that I'm having is that with this code it reloads the browser page infinitely. The issue seems to be with the document.write function, as without that the webpage loads fine (although it obviously isn't loading the appstyle.css stylesheet).
我遇到的问题是，使用此代码，它会无限地重新加载浏览器页面。问题似乎出在 document.write 函数上，因为没有它，网页加载得很好（尽管它显然没有加载 appstyle.css 样式表）。
I have also tried this if statement:
我也试过这个 if 语句：
if(window.location.search.indexOf('?app=true') === 0)
but it doesn't seem to make a difference.
但它似乎没有什么区别。
Is there a better way to load different stylesheets depending on if it is loaded in an iOS app vs the web? Is there something I am doing wrong in my code?
有没有更好的方法来加载不同的样式表，具体取决于它是在 iOS 应用程序中还是在网络中加载？我的代码有什么问题吗？
回答by tom
This line has a syntax error:
这一行有一个语法错误：
document.write("<link rel="stylesheet" type="text/css" href="appstyle.css" />");
Try changing it to this:
尝试将其更改为：
document.write('<link rel="stylesheet" type="text/css" href="appstyle.css" />');
or do the proper escaping
或者做适当的转义
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");
回答by Yoshi
try:
尝试：
location === window.location
in the console.
在控制台中。
It will output true. Which shows that the global variable locationis already set and points to the current locationobject of window. With your code you're changing that variable, by assigning a new value, which triggers a browser reload.
它会输出true. 这表明全局变量location已经设置并指向 的当前location对象window。使用您的代码，您通过分配一个新值来更改该变量，这会触发浏览器重新加载。
To fix it, just use another name for your variable, e.g.:
要修复它，只需为您的变量使用另一个名称，例如：
var currentLocation = window.location.href;
Or put your code in a self-executing function, to separate it from the global scope:
或者将您的代码放在一个自执行函数中，以将其与全局作用域分开：
(function (){
var location = window.location.href;
if(location.indexOf('?app=true') > -1) {
document.write('<link rel="stylesheet" type="text/css" href="appstyle.css" />');
}
}());
回答by kennebec
If you insist on using document.write, remember to call document.close() onload or soon after.
如果你坚持使用 document.write，记得在 onload 或不久之后调用 document.close()。
