如何使用JavaScript在head标签添加第三方script、link资源及页面加载后延迟显示代码

// 添加script标签方法
function injectScript(srcUrl) {
  const scriptEl = document.createElement('script')
  scriptEl.src = srcUrl
  // 可按需添加加载成功/失败回调
  scriptEl.onload = () => console.log('脚本加载完成')
  scriptEl.onerror = () => console.log('脚本加载异常')
  document.head.appendChild(scriptEl)
}

// 添加link样式表方法
function injectStylesheet(hrefUrl) {
  const linkEl = document.createElement('link')
  linkEl.rel = 'stylesheet'
  linkEl.href = hrefUrl
  document.head.appendChild(linkEl)
}

// 调用示例
injectScript('你的脚本资源URL')
injectStylesheet('你的样式表资源URL')

首先给需要延迟显示的内容容器默认设置样式display: none隐藏，代码实现如下：

// 监听页面完全加载（所有资源、dom都渲染完成）
window.addEventListener('load', () => {
  // 1. 插入第三方script标签到head
  const thirdScript = document.createElement('script')
  thirdScript.src = '第三方脚本的URL'
  document.head.appendChild(thirdScript)

  // 2. 等待3秒后显示目标内容，1000毫秒=1秒，可自行调整时长
  setTimeout(() => {
    const needShowContent = document.querySelector('你要显示的内容的选择器')
    needShowContent && (needShowContent.style.display = 'block')
  }, 3000)

  // 如果需要等第三方脚本加载完再开始计时，可以把定时器写到下面的回调里
  // thirdScript.onload = () => { 定时器逻辑 }
})

// 你的示例业务代码
var RequestURL = '';
function onWindowClosed(obj) {
  console.log("callback event : " + JSON.stringify(obj));
  const event_name = '你自定义的匹配事件名'
  if(obj.event_name === event_name) {
    console.log("successfully returned: " + obj.message);
  } else {
    console.log("unknown-event");
  }
}
var userDetails = JSON.stringify({
  "appId": "你的appId值",
  "customerId": "你的客户Id值",
});

内容的提问来源于stack exchange，提问作者Kritika