个人中心
gpt4 book ai didi

javascript - 如何在页面加载 10 秒后从 javascript 小部件运行代码？

转载 作者：行者123 更新时间：2023-11-29 21:16:20 25 4
gpt4 key购买 nike

我创建了一个显示弹出窗口的 javascript 小部件，任何人都可以通过在关闭前粘贴几行代码将其嵌入到他们的网站上 </body>标签。

在配置它时，用户可以指定他希望在页面加载 10 秒后显示弹出窗口。但是由于我的脚本依赖于 jQuery在执行它的主要代码之前，它必须首先加载它——有时脚本会执行它的 main()功能比 10 秒要晚得多...

所以目前的步骤是:

  1. 网页加载完毕(不知道要花多少时间)
  2. 我的脚本已加载(我不知道需要多少时间)
  3. 我的脚本会在必要时加载 jQuery(我不知道要花多少时间)
  4. 仅当加载 jQuery 时它才开始计数 10 秒然后运行 ​​displayPopup功能

如您所见，运行 displayPopup 是不安全的$(document).ready 后 10 秒内运行事件，因为它可能还没有加载 jQuery 或它本身。没关系——这是一个技术限制，我无能为力(对吧？)。

我只需要一种方法来知道自 $(document).ready 以来已经过了多少时间事件。然后我将在我的 main() 中检查这个秒数函数并决定是否需要立即显示弹出窗口(如果页面加载时间大于 10 秒)或等待几秒钟。

脚本安装代码:

<script>
(function() {
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    scriptTag.async = true;
    scriptTag.src = "https://www.server.com/script.js";

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(scriptTag, s);
})();
</script>

加载 script.js 的 jQuery 部分

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",                             
        "//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
    );

    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { 
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();            
        }
      };
    } 
    else { 
      script_tag.onload = scriptLoadHandler;
    }

    (document.getElementsByTagName("head")[0] || 
        document.documentElement).appendChild(script_tag);
} 
else {
  jQuery = window.jQuery;
  main();
}

function scriptLoadHandler() {
  jQuery = window.jQuery.noConflict(true);
  main();
}

主要功能:

function main() {
  setTimeout(function() {
    displayPopup();
  }, settings['numberOfSeconds'] * 1000);
}

最佳答案

在您的安装代码中，设置一个捕获当前时间的全局变量。因为这是在 <body> 之前结束它应该在 DOM 加载后立即开始。然后在你的main()函数，检查变量中经过了多少时间。如果超过 10 秒，您可以立即显示弹出窗口。如果它更少，您可以计算已经过去的时间，并设置一个超时，一旦真正过去 10 秒就会触发:

<script>
(function() {
  window.myPopupWidgetStartDate = Date.now();

  var scriptTag = document.createElement("script");
  scriptTag.type = "text/javascript";
  scriptTag.async = true;
  scriptTag.src = "https://www.server.com/script.js";

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(scriptTag, s);
})();
</script>


function main() {
  var secondsSinceInstall = Math.round((window.myPopupWidgetStartDate - Date.now());

  if (secondsSinceInstall > settings['numberOfSeconds']) {
    displayPopup();
  } else {
    setTimeout(function() {
      displayPopup();
    }, settings['numberOfSeconds' - secondsSinceInstall] * 1000);
  }
}

关于javascript - 如何在页面加载 10 秒后从 javascript 小部件运行代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39304946/

25 4 0
文章推荐： android - ListFragment setListAdapter
文章推荐： php - MySQL INSERT 或 PHP PDO 性能不佳
文章推荐： android - TextSwitcher - 获取样式属性并将其传递给另一个 View
文章推荐： javascript - D3 版本 4 的水平缩放？
行者123
个人简介

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

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