firefox中添加链接标记的Javascript问题
我运行了一些代码，在我的头部添加了一个链接标记，它在除Firefox之外的所有浏览器中都能正常工作，我想这可能是因为我使用appendChild（）将链接放在头部的末尾，在我添加了所有其他链接标记之后，最后一个样式表设置了一些其他样式表所依赖的css。但我不确定。基本上，我使用jHtmlArea生成的是文本区域的样式，jHtml有自己的样式表，我可以链接到它，但我需要添加自己的样式表，这取决于用户在其中查看页面的浏览器。无论如何，代码如下所示：firefox中添加链接标记的Javascript问题,javascript,dom,Javascript,Dom,我运行了一些代码，在我的头部添加了一个链接标记，它在除Firefox之外的所有浏览器中都能正常工作，我想这可能是因为我使用appendChild（）将链接放在头部的末尾，在我添加了所有其他链接标记之后，最后一个样式表设置了一些其他样式表所依赖的css。但我不确定。基本上，我使用jHtmlArea生成的是文本区域的样式，jHtml有自己的样式表，我可以链接到它，但我需要添加自己的样式表，这取决于用户在其中查看页面的浏览器。无论如何，代码如下所示： <html> <head>
<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>
这可能不是一个很好的解决方案，但它解决了我的一些问题，但它仍然不起作用：- < /P> < P> OK，我通过在开始设置一个样式表来设置DIV的大小来解决这个问题，在基于DIVE设置TestTaReA大小的样式表之前，我认为这已经完成了。p> 哎呀，每个浏览器都有不同的CSS文件？在任何情况下，您都需要定义“不工作”betterOk，基本上，设置文本区域和工具栏大小的数据表的样式似乎是在设置文本区域的实际大小之前设置的，因此获得了117px宽度的标准大小，但之后它所在的div的大小设置为100%，高度设置为200px，这使它成为一个非常小的文本区域，周围有大量的空白。。。将发布一个尖叫声……嗯，因为我的名声不是10，我不能张贴图片……好吧，我解决了这个问题，通过加载一个样式表，在开始设置DIV的大小之前，在样式表中设置了取决于div的文本大小的大小，所以我认为这已经完成了！关于每个浏览器不同css文件的评论；是的，我知道这不是一个非常优雅的解决方案，它肯定不是很适合未来，但这就是为什么我正在研究和。对于大多数浏览器来说，这似乎是非常好的支持。尽管我怀疑它是否能解决不同浏览器的问题，比如宽度：50%。
<link id="usersheet" rel="stylesheet" type="text/css" href="" />
document.getElementById("usersheet").href = href;