个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 03:27:40 24 4
gpt4 key购买 nike

此问题与之前的帖子有关:Check if user is using browser located in China or not

我正在加载一个外部 js 库来评估我想在我的 header 中加载哪个 css。按照上述帖子的公认答案，我将 userinfo.io API 加载到我的 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>

在Firefox中调试js，可以看到库加载成功。首先发生的是，我收到一条错误消息“引用错误:UserInfo 未定义”。我对我的 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>

作为 head 标签内的第一行，它开始真正识别对象 UserInfo 及其方法 getInfo()。同时，当我将行放回原来的位置时(例如在第一个代码片段中)，它也能识别该功能。这种行为不知何故让我想知道在加载 html 页面时 javascript 是如何在 head 标签中执行的。是否有可能在加载库之前偶尔调用该方法？

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

Broser console output

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

enter image description here

所以这是我的假设:

我无法在 head 标签中使用 document.write()，因为它会干扰页面加载。更有可能的是，我应该在页面成功加载后通过 getElementById() 访问和修改链接标记。所以我实际上会用 jQuery 的 ready() 函数来触发它，以确保库已成功加载？如果对这些想法有任何评论，我将不胜感激。

最佳答案

document.write() 是一个非常危险的函数(对于网页)。你应该更具体地说明你想在哪里写东西(而不是整个文档!)。因此，在您的 HTML 中，您可以指定一个空的 div block ，并为其分配一个 id:

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

然后在你的 JavaScript 中你会做这样的事情:

var place;  //global variable

在一些页面初始化函数中这样做:

place=document.getElementById("writehere");

然后，你可以随心所欲地写任何你想写的东西，比如:

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

您甚至可以重写它(在修改 innerHTML 时使用“=”而不是“+=”)。

我承认我可能错过了您在问题中提出的要点之一。我现在得到的印象是您想在加载期间为要加载的页面指定额外的内容，并且不一定总是相同的额外内容。我不确定 head 部分是尝试这样做的正确位置，因为我不知道如何强制浏览器注意新添加的 link 元素在 head 部分。我知道它可以关注一些事情，就像在这个例子中一样(虽然代码由与 body 标签关联的 onload 事件调用，但放置了一个图标进入浏览器选项卡，或浏览器窗口的左上角):

var hd, itm;

hd = document.getElementById('ID_of_Head');
itm = document.createElement('link');
itm.id = 'whatever';
itm.rel = 'shortcut icon';
itm.type = 'image/png';
itm.href = 'desired URL'; //OOPS; my comment below wrongly says 'src' property
hd.appendChild(itm);
//you can now re-use the 'itm' variable to specify another link, if you wish

appendChild() 函数可能足以触发浏览器注意新添加的链接，在这种情况下，这可能会通用，而不仅仅是针对这个特定示例。另一方面，我还没有尝试添加多个 link；有可能一次只能“关注”其中一个。不过，在那种情况下，仍然有一种方法涉及一系列函数，每个函数指定只向 head 添加一个 link。在每个函数的末尾，你会这样做:

setTimeout('nextlinkfunc();', 200);  //give each function a different name!

当当前的link添加函数结束时，它会设置一个计时器，让浏览器有机会关注刚刚添加的link。 200 毫秒(1/5 秒)后，计时器触发指定的下一个函数——您可以在其中指定将另一个 link 添加到 head。该函数的最后一件事将是另一个 setTimeOut() 到第三个函数，它有自己独特的名称....一个变体可能是一个更复杂的单一函数，其中一个参数用于指定正在对函数进行哪个“调用”(当然，对函数的第一次调用必须指定参数值 1):

//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);
}

关于javascript - 使用外部 javascript 库的动态 html 链接标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26831036/

24 4 0
文章推荐： node.js - 在 Node.js API 中显示整个 MongoDB 内容
文章推荐： python - 使用 SQLAlchemy 更新数据集的 pythonic 方式是什么？
文章推荐： c - 将用于分配内存的指针声明为 const 有缺点吗
文章推荐： python - 用于客户端 python 接口(interface)/raw_input 的 Twisted Reactor
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com