Question

......正确的道路。

例如。我有一个名为foo.js的脚本。我想插入样式表声明，我可以按照以下说明进行操作：

$('head').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

问题：我必须将完整路径放到样式表文件中。因此，我必须放置：http://hostname/directory/template/foo.css而不是/template/foo.css。我无法静态设置它，因为脚本可以放在不同的服务器和不同的位置。所以它可以是：http://foo.com/bar/foo.css或http://foo.com/foo.css。

如果我可以在服务器上获取foo.js文件的路径，那将非常有用。那将是足够好的，因为我可以根据javascrpt的文件设置样式表位置。

Answer 1

我一直都这样做：

$('body').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

而不是头

啊......对不起，我刚刚意识到你的问题是什么。一种策略是从DOM本身提取脚本的路径：

$('script').each(function(i,el){
    var path = el.src.match(/^(.+)\/foo.js$/);
    if (path) {
        $('body').append('<link rel="stylesheet" ' +
                                'href="' + path[1] + '/foo.css" ' +
                                'type="text/css" />'
                        );
    }
})

Answer 2

这是我用来获取当前脚本url的常用技术：

var scriptUrl = (function() {
  var scripts = document.getElementsByTagName('script'),
      script = scripts[scripts.length - 1];

  return script.src;
})();

它的工作原理基本上是因为在执行脚本时，它是DOM上的最后一个script标记。

Answer 3

您可以使用window.location并从中获取路径。例如，对于此页面，它是：

>>> window.location
http://stackoverflow.com/questions/2033742/how-to-insert-external-stylesheet-in-javascript-dynamically

如何在JavaScript中插入外部样式表（动态）

3 个答案: