Question

我运行了一些代码，在我的头上添加了一个链接标记，除了Firefox之外，它在所有浏览器中都能正常工作，我想这可能是因为我使用了appendChild（），它将链接放在头部的末尾，之后我添加的所有其他链接标记，并且最后一个样式表设置了一些其他样式表依赖的css。但我不确定。基本上它是我使用jHtmlArea生成的文本区域的样式，jHtml有自己的样式表，我链接到，但我需要添加自己的样式表，具体取决于用户正在查看页面的浏览器。无论如何代码看起来像这样：

<html>
<head>
    <title>JHTML Test!</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="jHtmlArea-0/style/jHtmlArea.css" />
    <link href="jBox-0.2.0/Source/jBox.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.10.1/media/css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.10.1/extensions/TableTools/css/dataTables.tableTools.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.10.1/extensions/ColReorder/css/dataTables.colReorder.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.10.1/extensions/ColVis/css/dataTables.colVis.css" />
</head>
<body>
    <script language="javascript">
        // Browsercheck
        var browser="";
        var version="";
        var href="";
        if(navigator.userAgent.indexOf("Trident") >= 0) //Versions 7-11 has Trident in userAgent but 6 does not!
        {
            browser = "ie";
            //version = "11";
            if(navigator.appName.indexOf("Netscape") >= 0) 
            {
                version="11";
                href = "css/style" + browser + version + ".css";
            } else if(navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) 
            {
                if(navigator.appVersion.indexOf("MSIE 7.0") >= 0)
                { //Dont know if we support or should be left out.
                    version="7";
                    href = "css/style" + browser + version + ".css";
                } else if(navigator.appVersion.indexOf("MSIE 8.0") >= 0)
                {
                    version="8";
                    href = "css/style" + browser + version + ".css";
                } else if(navigator.appVersion.indexOf("MSIE 9.0") >= 0)
                {
                    version="9";
                    href = "css/style" + browser + version + ".css";
                } else if(navigator.appVersion.indexOf("MSIE 10.0") >= 0)
                {
                    version="10";
                    href = "css/style" + browser + version + ".css";
                }
            }
        } else if(navigator.userAgent.indexOf("Chrome") >= 0) 
        {
            if(navigator.userAgent.indexOf("OPR") >= 0) 
            {
                browser="opera";
                href = "css/style" + browser + ".css";
            } else 
            {
                browser="chrome";
                href = "css/style" + browser + ".css";
            }
        } else if(navigator.userAgent.indexOf("Firefox") >= 0) 
        {
            browser="firefox";
            href = "css/style" + browser + ".css";
        } else if(navigator.userAgent.indexOf("Safari") >= 0) 
        {
            browser="safari";
            href = "css/style" + browser + ".css";
        } else 
        {
            alert("This only supports MSIE version 7-11, Chrome, Firefox, Safari or Opera!");
            //alert("Information og the browser:\nThe code name of this browser is: " + navigator.appCodeName + "\nThe name of this browser is: " + navigator.appName + "\nThe version of this browser is: " + navigator.appVersion + "\nThe user agent header of this browser looks like this:\n" + navigator.userAgent);
            self.close();
        }
        var cssStyle = document.createElement("link");
        cssStyle.type = "text/css";
        cssStyle.rel = "stylesheet";
        cssStyle.href = href;
        document.getElementsByTagName("head")[0].appendChild(cssStyle);
    </script>
    <div>
        <div id="top">
            <div id="mailheader">
                <table>
                    <tr>
                        <td>
                            <label>
                                To:
                            </label>
                        </td>
                        <td>
                            <input class="tooltip" data-jbox-content="Input the recipient of the mail here!" id="toTF" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                cc:
                            </label>
                        </td>
                        <td>
                            <input class="tooltip" data-jbox-content="Input the cc of the mail here!" id="ccTF" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                subject:
                            </label>
                        </td>
                        <td>
                            <input class="tooltip" data-jbox-content="Input the subject of the mail here!" id="subjectTF" type="text"/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="mailbody">
            <textarea id="mailbodytextarea">

            </textarea>
        </div>
    </div>

因为代码更多，但代码工作正常，并且与我也在使用的DataTables框架有关。基本上我想要做的是将样式表链接添加到头部作为第一个孩子，或者在元标记和第一个链接标记之间，但真正关心它的人。

我希望周围有人可以帮助我解决这个问题，我不介意使用JQuery解决问题，而我也在body标签的末尾导入JQuery库。如果您需要任何更多信息，请提出要求。如果代码看起来有点奇怪和无用，那可能是因为这是一个沙箱，用于测试如何实现更大的系统，在尝试使用这三个新框架时我不想搞砸。

我只是试图将链接硬编码到我认为它应该处于的位置并且似乎在firefox中工作，所以解决方案似乎是正确的，但我不知道如何将它放在可行的地方： - ）

好的，所以我通过创建一个包含所有属性和id但是一个空的href属性的链接标记，并设置了一个getElementById来设法将正确的东西添加到链接标记中，但现在看起来我似乎必须以某种方式刷新页面而不再设置href ......

<link id="usersheet" rel="stylesheet" type="text/css" href="" />

检查浏览器后

然后在代码中：

document.getElementById("usersheet").href = href;

这可能不是一个很好的解决方案，但它解决了我的一些问题，但它仍然无效： - ）

Answer 1

好的，我通过在开头设置div的大小来加载样式表来解决这个问题，在样式表之前根据div设置textarea的大小。所以我认为这样做了！

Firefox中附加链接标记的Javascript问题

1 个答案: