如何通过JavaScript将剪贴板URL赋值给iframe的src实现页面渲染

现有代码问题说明 #

1. 无法直接在HTML的src属性中拼接JavaScript函数返回值，你编写的src=""+ ReturnURL()会被浏览器直接解析为普通字符串，不会执行对应的JS逻辑。
2. 用到的document.execCommand('paste')方法已被现代浏览器废弃，无法在多数环境下正常运行。
3. 剪贴板读取属于敏感操作，现代浏览器禁止页面在无用户主动交互的前提下自动读取剪贴板内容，必须由点击、按键等用户行为触发才会被允许。
4. 代码中调用了未定义的getClipboard()方法，会直接抛出JS运行错误。

可行实现方案 #

现在标准实现采用官方Clipboard API，配合用户主动交互触发剪贴板读取，示例代码如下：

<iframe id="showskill" scrolling="yes" height="100%" width="100%" src=""></iframe>
<button id="loadClipUrl">从剪贴板加载URL</button>
<script>
document.querySelector('#loadClipUrl').addEventListener('click', async () => {
  try {
    // 读取剪贴板文本内容
    const clipContent = await navigator.clipboard.readText();
    // URL合法性校验
    const urlRule = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/;
    if (!urlRule.test(clipContent)) {
      alert('剪贴板内容不是合法URL');
      return;
    }
    // 自动补全协议头后赋值给iframe
    const targetUrl = clipContent.startsWith('http') ? clipContent : `https://${clipContent}`;
    document.querySelector('#showskill').src = targetUrl;
  } catch (e) {
    console.error('读取失败：', e);
    alert('读取剪贴板失败，请确认已授予站点剪贴板访问权限，且当前站点为HTTPS或localhost环境');
  }
})
</script>

使用注意 #

• 必须由用户主动点击按钮触发读取逻辑，页面加载时自动调用会被浏览器安全策略拦截
• 部署站点必须使用HTTPS协议，本地调试可使用localhost，否则Clipboard API会被浏览器禁用
• 首次调用时浏览器会弹出权限申请，用户同意后才可正常读取剪贴板内容

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