我正在创建一个弹出窗口并希望向该弹出窗口添加CSS文件。下面是弹出窗口的代码。我有一个JavaScript可以创建一个弹出窗口。
<a href="popupwindowcontent.xhtml" title="Print" class="popupwindow">Print1</a>
现在我想将一个CSS文件添加到这个弹出窗口中。我尝试了以下代码：
$('.popupwindow').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
但是它不起作用。
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
这应该可以起作用。
这是我使用jQuery ajax添加CSS的方法。希望能对某些人有所帮助。
$.ajax({
url:"site/test/style.css",
success:function(data){
$("<style></style>").appendTo("head").html(data);
}
})
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
});
css_link.appendTo('head');
这只是我的个人见解……有时候确认没有重复是很重要的，所以我们在工具库中有下面这个函数:
jQuery.loadCSS = function(url) {
if (!$('link[href="' + url + '"]').length)
$('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
}
使用方法：
$.loadCSS('css/style2.css');
loadCSS 可以通过向 URL 添加或不添加时间戳查询参数来告知是否从缓存中加载 CSS 文件。 - Stephan$('<link rel="stylesheet" href="css/style2.css" type="text/css" />').appendTo('head');
你的问题在于你的选择器是用于锚点元素<a>。你把<a>标签看作代表页面，但实际上并非如此。
$('head')只要这个选择器是由需要css的页面执行，就可以工作。
为什么不直接将css文件添加到相关页面呢？有任何特殊原因需要从另一个页面动态尝试这样做吗？我甚至不熟悉可以像这样注入css到远程页面的方法...感觉会是一个重大安全漏洞。
对你的推理进行补充：
那么你应该简单地传递一个参数给页面，使用javascript读取它，然后根据参数执行必要的操作。
你尝试过使用CSS引用的媒体属性吗？
<link rel="stylesheet" href="css/style2.css" media="print" type="text/css" />
或者将其设置为屏幕，如果您不希望打印版本使用该样式：
<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />
这样你就不需要动态添加它了。
我认为你不能将一个实例化的窗口附加到下面...我知道如果url在不同的域上（XSS和所有爵士），你不能这样做，但是你可以从那个窗口向上讲话并访问父窗口的元素，假设它们在相同的域上。你最好在加载页面时附加样式表，如果该页面不在同一域上（例如尝试重新设计其他人的页面），则无法进行。