gpt4 book ai didi

javascript - 无法在没有 url 参数的情况下将样式表与 window.open 链接

转载 作者:行者123 更新时间:2023-11-30 00:05:25 28 4
gpt4 key购买 nike

关闭 jQuery 对话框后,我使用 $.ajax 调用从服务器检索数据。在回调中,我将返回的数据以通常的方式传递给函数,如下所示:

success: function (result) { displayPage ( result);}

此函数意味着在弹出窗口中显示参数数据并通过各种 jQuery 命令和 CSS 样式表管理这些数据:

function displayPage (result) // analytical comments included
{
// (1) this block does not work: testPage shows, not writing occurs-----------
/*
var myWindow = window.open('../innout/testPage.php', "_blank", "height=1000, width=1300,top=50,left=150"),
myPage = myWindow.document.body,
txt = 'some Text';

$('#div1', myPage).html (txt);// neither this is operative…
myPage.write (txt); // nor this
*/

// (2) this block works, but no structure, no style sheets: -----------------
/*
var myWindow = window.open('', "_blank", "height=1000, width=1300,top=50,left=150"),
myPage = myWindow.document.body,
txt = 'some Text';

myWindow.document.write (txt);
*/

// (3) this block works, but SYNCHRO problem: -----------------

var myWindow = window.open('', "_blank", "height=1000, width=1300,top=50,left=150"),
myPage = myWindow.document.body,
txt = 'some Text',
pageStruct = "<html>"
+ "<head><meta charset='utf-8'><title>Landscape</title></head>"
+ "<body bgcolor='pink'><div id='div1'</div></body>"
// or + "<body style='background-color: pink'><div id='div1'</div></body>"
+ "</html>",
styleLinks = "<link rel='stylesheet' type='text/css' href='../innout/DossierCSS/globalRules.css'>";

// Let's try now to link style sheets:

$(styleLinks).appendTo(myPage); // INEFFECTIVE
// or:
$(styleLinks).appendTo(myWindow.document.head); // INEFFECTIVE
// What about this? http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also
$("<link/>",
{
rel: "stylesheet",
type: "text/css",
href: "../innout/DossierCSS/globalRules.css"
}).appendTo("head") // INEFFECTIVE. Also tried: (myWindow.document, "head")

$(pageStruct).appendTo(myPage); // works

$(myPage).attr ('bgcolor', 'pink'); // without it, 'original' bgcolor attribute inoperative !

$('#div1', myPage).toggleClass ('violet');// INEFFECTIVE — .violet defined in globalRules.css as color:purple

$('#div1', myPage).css ( {"color": "purple" }); // works

$('#div1', myPage).html (txt); // works
}

我的第一个方法是通过 window.open一个 URL,即 testPage.php——一个非常简单的 URL:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Landscape</title>
</head>

<body bgcolor="pink">
<div id="div1"></div>
</body>
</html>

方式(1)不允许写,而方式(2)和(3)可以。

方法 (3) 似乎令人满意但事实并非如此:我无法将 css 样式表链接到页面。我尝试了两种不同的方法都无济于事,其中一种在 SOE 帖子(引用)中有详细说明。此外,在 pageStruct 处添加内联样式或 html 格式水平是无效的。

似乎<link>说明无法传递给 <head>因为文件头已经发送。通过方式 (1),“修改”指令会在后台短暂闪烁,然后被 testPage.php 覆盖。内容:显然,处理window.open发生在 其余代码之后:同步问题!

注意:a) 我还尝试使用 setTimeOut 延迟 DOM 修改指令——未成功; b) 我不能在要加载的页面中定义静态结构,因为我必须处理动态元素。

然后如何以良好的同步方式链接我的样式表?

最佳答案

你的问题不是你如何在新文档中添加样式表(顺便说一句,应该在 <head> 中),而是 href属性。

目前,您已将其设置为 "../innout/DossierCSS/globalRules.css" ,这是一个“相对URI”,它是相对于当前的document.baseURI路径。

既然你设置了window.open()的 URL 参数为 _blank , baseURI新文档的默认设置为 about:blank .然后,当转换为绝对 URL 时,您的相对 URL 将指向无效的 URL。

解决方案是设置您的 <style>href属性为绝对 URL ( "http://yoursite.net/innout/DossierCSS/globalRules.css" ) 或使用 <base> 元素,及其 href属性设置为 "http://yoursite.net/someDirectory/" .
后一种方法将设置文档的 baseURI到它的href属性的值,使所有相对 URL 都相对于这个新 URL。请注意,它应该放在文档中指向外部资源的任何其他元素之前。

关于javascript - 无法在没有 url 参数的情况下将样式表与 window.open 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38714903/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com