Question

我正在使用两个css文件。

file1.css，file2.css

问题当用户看到我的页面时我需要使用file1.css，当用户在iframe中看到mypage时我只需要使用file2.css。

有什么方法可以做到这一点？

Answer 1

var fileToUse = (window.location != window.parent.location) ? "file1.css" : "file2.css";
$('<link rel="stylesheet" type="text/css" href="' + fileToUse + '"/>').appendTo("head");

我现在无法测试，但应该这样做。

Answer 2

以下是一种略有不同的方法：始终包含一个CSS文件，不使用JavaScript，然后如果您发现自己在iframe中，也包含另一个CSS文件。显然你必须考虑到这一点来创建文件，但是如果其他所有条件都相同，那么两个文件中的冲突设置将被解析为支持第二个，因此它可以覆盖第一个。（这可能很棘手并需要测试，“如果其他条件相同”则涵盖了许多罪行。）

我的理由是并非每个人都启用了JavaScript - 使用NoScript和类似浏览几乎是时髦的，并且只在您信任的网站上启用脚本。因此，如果用户禁用了脚本，您希望确保内容看起来不错，iframe或no。

首先，第一件事是：你如何检查你是否在框架中？ IE在这里有一个令人讨厌的“陷阱”，所以值得说：

// This works (note the !==):
if (self !== self.parent) {
    // You're in a frame/iframe
}

// This also works (note the !=, NOT !==):
if (window != window.parent) {
    // ...
}

// This FAILS on Internet Explorer (note the !==):
if (window !== window.parent) {
    // ...
}

我不知道为什么最后一个在IE上失败（bobince似乎认为他确实如此，here;我必须在我确信之前更多地研究它，{{ 1}}应该self ===（以及最新的草案规范says it should）。但无论如何，IE上的it does fail。所以选择前两个中的任何一个并使用它。

在实际操作方面，这里有三个版本，都假设在文档的window部分内：

版本1：使用head：

document.write

有些人可能会在那里<link rel='stylesheet' type='text/css' href='mainfile.css'> <script type='text/javascript'> if (self !== self.parent) { document.write("<link rel='stylesheet' type='text/css' href='framestyle.css'>"); } </script>畏缩，但这是我认为可以接受的地方。但请注意，您无法在XHTML中执行此操作，只需HTML。

版本2：使用动态创建的document.write元素和jQuery：

（当然，这必须是在加载jQuery的脚本标记之后。）

link

我总是担心在页面解析的早期进行DOM操作，但上述似乎在Windows上的IE6和IE7以及Linux上的Chrome，Firefox和Opera中可靠地工作。所以它可能会很好。示例：http://jsbin.com/osuzo3

版本3 ：使用动态创建的<link rel='stylesheet' type='text/css' href='mainfile.css'> <script type='text/javascript'> if (self !== self.parent) { jQuery("<link rel='stylesheet' type='text/css' href='framestyle.css'/>").appendTo('head:first'); } </script>元素，不带 jQuery：

也许您希望在文档中进一步加载jQuery脚本，而不是在link中，或者您只是想尽早确保CSS发生。直接的DOM操作并不难：

head

Live example（没有帧检测，只需添加<link rel='stylesheet' type='text/css' href='mainfile.css'> <script type='text/javascript'> (function() { var link, list; if (self !== self.parent) { link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = "framestyle.css"; list = document.getElementsByTagName('head'); if (list.length > 0) { list[0].appendChild(link); } } })(); </script>元素）

Answer 3

var stylesheet = (top === self) ? "file1.css" : "file2.css";
$('<link rel="stylesheet" type="text/css" href="' + stylesheet + '"/>').appendTo("head");

或

$('<link rel="stylesheet" type="text/css" href="' + ((top === self) ? "file1.css" : "file2.css") + '"/>').appendTo("head");

这里是结果的jsfiddle：

link text

如何在jquery中调用css文件

3 个答案: