如何使用JavaScript读取URL参数并动态设置iframe的src属性

以下代码可直接保存为HTML文件部署使用，完全避免无限加载问题，同时支持短标识映射和直接传完整URL两种使用方式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统一文件访问入口</title>
    <style>
        * {margin: 0; padding: 0;}
        iframe {width: 100vw; height: 100vh; border: none;}
        .tip {padding: 20px; font-size: 16px;}
    </style>
</head>
<body>
    <iframe id="contentFrame" src="about:blank"></iframe>
    <script>
        // 仅在DOM加载完成后执行一次，从根源避免重复触发加载导致的无限循环问题
        document.addEventListener('DOMContentLoaded', function() {
            // 读取URL参数
            const params = new URLSearchParams(window.location.search);
            const inputUrl = params.get('url');
            const frame = document.getElementById('contentFrame');

            // 短标识映射配置，可自行修改增减键值对
            const siteMap = {
                'sitebackupA': 'https://替换为你的实际存储地址A',
                'sitebackupB': 'https://替换为你的实际存储地址B',
                // 可继续添加其他映射规则
            };

            if (!inputUrl) {
                document.body.innerHTML = '<div class="tip">请传入url参数访问，示例：b.example.com?url=sitebackupA</div>';
                return;
            }

            // 解析最终加载地址，优先匹配短标识，无匹配则直接使用传入的完整URL
            const targetUrl = siteMap[inputUrl] || inputUrl;
            // 仅执行一次赋值操作
            frame.src = targetUrl;
        })
    </script>
</body>
</html>

配置说明 #

• 不需要短标识功能的话可以直接删除siteMap相关逻辑，直接把inputUrl赋值给frame.src即可，支持直接传完整URL使用，格式如b.example.com?url=https://stackoverflow.com
• 若需要提升安全性，可自行添加域名白名单校验逻辑，判断targetUrl的域名属于允许范围后再完成赋值，避免恶意参数加载非法内容

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