【日常记录-JS】HTML动态加载JS脚本

复制代码
Author:赵志乾
Date:2024-08-05
Declaration:All Right Reserved!!!

1. 问题描述

从外部系统跳到落地页,并将验签相关参数通过url参数传入落地页。由于后台对所有请求均增加了验签校验,导致js静态文件获取失败。原有代码如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<!--由于src指定的静态文件未添加验签信息,导致请求被拦截-->
<script type="text/javascript" src="standalone.bundle.js"></script>

2. 解决方案

由于HTML本身是静态的,动态加载JS文件,需要通过脚本来实现;代码如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<script>
    // 定义脚本加载函数
    function loadScript(url) {
        // step1: 创建script标签并赋值基本属性
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.onload = function() {
            console.log('Script loaded and executed.');
        };
        script.onerror = function() {
            console.error('Script loading failed.');
        };
        // step2: 将script标签添加到HTML页面
        document.head.appendChild(script);
    }

    window.onload = function() {
        // 在加载脚本时拼接验签参数
        loadScript("standalone.bundle.js"+window.location.search);
    };
</script>
相关推荐
海的诗篇_21 分钟前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom66644 分钟前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey1 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W1 小时前
uniapp全局状态管理实现方案
前端
Vertira1 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
鹏程1 小时前
局域网下五子棋,html+node.js实现
node.js·html
PeterJXL2 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心2 小时前
el-table虚拟列表封装
前端