使用外部javascript库的动态html链接标记_Javascript_Html_Css_Userinfo_Link Tag

使用外部javascript库的动态html链接标记

javascript html css

使用外部javascript库的动态html链接标记,javascript,html,css,userinfo,link-tag,Javascript,Html,Css,Userinfo,Link Tag,这个问题与以前的一篇文章有关：我正在加载一个外部js库，以评估要在头中加载哪些css。在接受了上述帖子的答案后，我将userinfo.ioapi加载到HTML头部，然后对接收到的数据进行评估。以下是我所做的： <head> ... <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script> &

这个问题与以前的一篇文章有关：

我正在加载一个外部js库，以评估要在头中加载哪些css。在接受了上述帖子的答案后，我将userinfo.ioapi加载到HTML头部，然后对接收到的数据进行评估。以下是我所做的：

<head>

...

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>

<script type="text/javascript">
    UserInfo.getInfo(function(data) {
       // the "data" object contains the info
       if (data.country.code == 'CN') {
          // Load fallback fonts
          document.write('<link href="http://fonts.useso.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700" rel="stylesheet" type="text/css">');
       } else {
          // Load google fonts
          document.write('<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700" rel="stylesheet" type="text/css">');
       }
    }, function(err) {
       // the "err" object contains useful information in case of an error
    });
</script>

</head>


...
getInfo（函数（数据）{
//“数据”对象包含信息
如果（data.country.code=='CN'）{
//加载回退字体
文件。写（“”）；
}否则{
//加载谷歌字体
文件。写（“”）；
}
}，函数（err）{
//“err”对象包含发生错误时的有用信息
});

在Firefox中调试js时，我可以看到库已成功加载。首先，我收到一条错误消息“Reference error:UserInfo not defined”。我对html头部的行顺序做了一些调整（当然还有一些css，一些元标记和标题）。在把

<head>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>

...

<script type="text/javascript">
    UserInfo.getInfo(function(data) {
       // the "data" object contains the info
       if (data.country.code == 'CN') {
          // Load fallback fonts
          document.write('<link href="http://fonts.useso.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700" rel="stylesheet" type="text/css">');
       } else {
          // Load google fonts
          document.write('<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700" rel="stylesheet" type="text/css">');
       }
    }, function(err) {
       // the "err" object contains useful information in case of an error
    });
</script>

</head>


...
getInfo（函数（数据）{
//“数据”对象包含信息
如果（data.country.code=='CN'）{
//加载回退字体
文件。写（“”）；
}否则{
//加载谷歌字体
文件。写（“”）；
}
}，函数（err）{
//“err”对象包含发生错误时的有用信息
});

作为head标记内的第一行，它开始实际识别对象

UserInfo

及其方法

getInfo（）

。同时，当我将行放回其原始位置时（例如在第一个代码段中），它也会识别该函数。这种行为不知怎的让我想知道，在加载html页面时，如何在head标记中执行javascript。是否有可能在加载库之前每隔一段时间调用一次方法

无论如何，现在当它成功导入userinfo.io库时，该站点不再正确加载。看看浏览器控制台，我看到：

在查看我的页面的源代码时，我只看到正确加载的链接标记，但是页面的其余部分丢失了

我想是这样的：

我无法在head标记中使用

document.write（）

，因为它会干扰页面加载。更可能的情况是，在页面成功加载后，我应该通过

getElementById（）

访问和修改链接标记。因此，我将实际使用jQuery的

ready（）

函数触发它，以确保库已成功加载？如果您对这些想法有任何评论，我将不胜感激。

document.write（）

对于网页来说是一个非常危险的功能。你应该更具体地说明你想在哪里写东西（不是整个文档！）。因此，您可以在HTML中指定一个空的

div

块，并为其分配一个id：

<div id="writehere"></div>

在某些页面初始化函数中执行以下操作：

place=document.getElementById("writehere");

然后，你可以在任何地方写你想写的东西，比如：

place.innerHTML += "Special output text<br />";

appendChild（）

函数可能足以触发浏览器关注新添加的链接，在这种情况下，这可能是通用的，而不仅仅是针对这个特定的示例。另一方面，我没有尝试添加多个

链接

s；有可能一次只能“注意”其中一个。但是，在这种情况下，仍然有一种方法，涉及一系列函数，每个函数都指定只向

头部添加一个链接。在每个功能结束时，您将执行以下操作：
setTimeout('nextlinkfunc();', 200);  //give each function a different name!

当当前的链接
-添加功能结束时，它会设置一个计时器，让浏览器有机会关注刚刚添加的链接
。200毫秒（1/5秒）后，计时器触发指定的下一个函数——您可以指定在头部添加另一个链接。该函数的最后一件事是另一个setTimeOut（）
到第三个函数，它有自己的唯一名称。。。。该函数的一个变体可能是一个更复杂的单一函数，其中一个参数用于指定对该函数进行的“调用”（当然，对该函数的第一次调用必须指定参数值1
）：
//注意需要声明全局“hd”和“itm”变量，
//并在第一次调用此函数之前设置“hd”变量
函数nextlinkfunc（p）
{itm=document.createElement（'link'）；
//前面介绍的更多内容
开关（p++）
{case 1://注意每个'case'块都可以有额外的'conditional'代码
itm.href=“第一链接的URL”；
打破
案例2://条件代码可以包含许多不同的URL组合
itm.href=“第二链接的URL”；
打破
//等
}
hd.儿童（itm）；
如果（p好的话，这个很好用！谢谢
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>

<script type="text/javascript">
  UserInfo.getInfo(function(data) {

    var elHead, elLink;

    elLink = document.createElement('link');
    elLink.rel = 'stylesheet';
    elLink.type = 'text/css';

    if (data.country.code == 'CN') {
      elLink.href = 'http://fonts.useso.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700';
    }else{
      elLink.href = 'http://fonts.google.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700';
    }

    elHead = document.getElementsByTagName("head")[0];

    elHead.appendChild(elLink);

  }, function(err) {

  });
</script>

...

<body onload="UserInfo.getInfo();">


getInfo（函数（数据）{
艾琳·艾尔海德；
elLink=document.createElement（'link'）；
elLink.rel='stylesheet'；
elLink.type='text/css'；
如果（data.country.code=='CN'）{
elLink.href=http://fonts.useso.com/css?family=Source+Sans+Pro:200400700 | Dancing+Script:400700 | PT+Serif | Open+Sans:400300700'；
}否则{
elLink.href=http://fonts.google.com/css?family=Source+Sans+Pro:200400700 | Dancing+Script:400700 | PT+Serif | Open+Sans:400300700'；
}
elHead=document.getElementsByTagName（“head”）[0]；
艾尔海德·阿佩奇尔德（埃林克）；
}，函数（err）{
});
...
首先，你能详细说明“危险功能”是什么意思吗？其次，我同意这将适用于a，但我的问题与-tag有关。我认为我不能为它指定“id”，因为-tag属性（c.f.）中没有列出“id”。你是说我应该
setTimeout('nextlinkfunc();', 200);  //give each function a different name!

//Note need to declare the global 'hd' and 'itm' variables,
// and set the 'hd' variable, before calling this function the first time
function nextlinkfunc(p)
{ itm = document.createElement('link');
  //more stuff as previously presented
  switch(p++)
  { case 1: //Note each 'case' block could have extra 'conditional' code
      itm.href = "URL_of_1st_link";
      break;
    case 2: //Conditional code can encompass many different combinations of URLs
      itm.href = "URL_of_2nd_link";
      break;
    //etc
  }
  hd.appendChild(itm);
  if(p<max_number_of_links_you_want_to_add)
    setTimeout('nextlinkfunc('p');', 200);
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>

<script type="text/javascript">
  UserInfo.getInfo(function(data) {

    var elHead, elLink;

    elLink = document.createElement('link');
    elLink.rel = 'stylesheet';
    elLink.type = 'text/css';

    if (data.country.code == 'CN') {
      elLink.href = 'http://fonts.useso.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700';
    }else{
      elLink.href = 'http://fonts.google.com/css?family=Source+Sans+Pro:200,400,700|Dancing+Script:400,700|PT+Serif|Open+Sans:400,300,700';
    }

    elHead = document.getElementsByTagName("head")[0];

    elHead.appendChild(elLink);

  }, function(err) {

  });
</script>

...

<body onload="UserInfo.getInfo();">