Question

关闭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 - 一个非常简单的：

<!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），＆＃39;修改＆＃39;说明会在后台短暂闪烁然后被testPage.php内容覆盖：显然，window.open的处理在其余代码后发生：同步问题！

注意：a）我还试图用setTimeOut -unsuccessfully延迟DOM修改指令; b）我无法在要加载的页面中定义静态结构，因为我必须处理动态元素。

如何以良好的同步方式链接样式表？

Answer 1

您的问题不是如何在新文档中添加样式表（应该在<head> btw中），而是href属性。

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

由于您确实将window.open()的网址参数设置为_blank，因此新文档的baseURI默认设置为about:blank。然后，当转换为绝对URL时，您的相对URL将指向无效的URL。

解决方法是将<style>的{{1}}属性设置为绝对网址（href）或使用<base>元素及其{ {1}}属性设置为"http://yoursite.net/innout/DossierCSS/globalRules.css" 后面的方法会将文档的href设置为其"http://yoursite.net/someDirectory/"属性的值，使所有相对URL相对于此新URL。请注意，它应该在指向外部资源的任何其他元素之前放置在文档中。

无法在没有url参数

1 个答案: