浏览器扩展弹窗URL设置问题：默认加载谷歌页面失效

嘿，我一眼就看出问题所在啦！你当前的脚本之所以没生效，是因为脚本在<head>里执行的时候，页面的<iframe>元素还没被浏览器渲染到DOM中，这时候document.getElementById("MyFrame")会返回null，自然没法设置它的src属性，所以弹窗才会显示空白。

下面给你几个可行的解决办法：

方法1：把脚本移到<body>末尾 #

把脚本放在<iframe>元素之后，这样当脚本执行时，DOM已经加载完成，能正确找到目标元素：

<html>
<head>
<style type="text/css">
body {width:780px; height:580px;} /* 补全单位px，避免样式失效 */
</style>
</head>
<body>
<iframe id="MyFrame" src = "" width="100%" height="100%" frameborder="0"></iframe>
<script>
// 注意：你代码里的ReturnURL()函数未定义，若暂时不需要可直接去掉拼接逻辑
var value_raw2 = "https://www.google.com/";
document.getElementById("MyFrame").src = value_raw2; // 若需要追加参数可改为 value_raw2 + ReturnURL()
</script>
</body>
</html>

方法2：用DOMContentLoaded事件监听DOM就绪 #

如果不想移动脚本位置，可以用浏览器的DOM加载完成事件包裹代码，确保DOM就绪后再执行：

<html>
<head>
<style type="text/css">
body {width:780px; height:580px;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var value_raw2 = "https://www.google.com/";
  // 先判断ReturnURL是否为有效函数，避免报错
  document.getElementById("MyFrame").src = value_raw2 + (typeof ReturnURL === 'function' ? ReturnURL() : '');
});

// 这里可以定义你的ReturnURL函数示例
function ReturnURL() {
  // 比如返回带随机数的参数，防止缓存
  return '?rand=' + Math.random();
}
</script>
</head>
<body>
<iframe id="MyFrame" src = "" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>

关于后续优化：随机动态切换任意URL #

等基础功能跑通后，你可以这样实现随机切换逻辑：

• 先定义一个包含多个目标URL的数组
• 用Math.random()生成随机索引，从数组中选取对应URL
• 将随机URL赋值给iframe的src属性

示例代码片段：

// 定义要随机切换的URL列表
const urlList = [
  "https://www.google.com/",
  "https://www.stackoverflow.com/",
  "https://github.com/"
];
// 生成0到数组长度-1之间的随机整数索引
const randomIndex = Math.floor(Math.random() * urlList.length);
// 设置iframe的src为随机选中的URL
document.getElementById("MyFrame").src = urlList[randomIndex];

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