如何为window.load事件绑定两个jQuery函数及iframe加载相关问题

嘿，这个需求我完全懂——不想让用户在加载外部iframe时看到浏览器左下角的URL，同时还要保留那个jQuery控制的Loader动画。下面给你两个亲测有效的方案，按需选择：

方案一：动态创建iframe，加载完成后再插入DOM #

这个方法的核心是让iframe在加载过程中不在页面DOM结构里，这样浏览器就不会在状态条显示它的目标URL，等加载完成后再把它放到页面中，同时隐藏Loader。

步骤1：调整HTML结构 #

保留你的Loader容器，再加一个空容器用来存放iframe：

<!-- 你的Loader容器 -->
<div id="loader" style="position: fixed; inset: 0; background: #fff; display: flex; align-items: center; justify-content: center;">
  <img src="loader.gif" alt="加载中..." />
</div>

<!-- 用来放iframe的空容器 -->
<div id="iframe-container"></div>

步骤2：修改jQuery逻辑 #

替换原来的window.load事件代码，改成动态创建并加载iframe：

$(document).ready(function() {
  // 替换成你从上一页拿到的动态SRC值
  const dynamicIframeSrc = "https://外部域地址/目标页面";

  // 创建iframe元素，初始设置为隐藏
  const iframe = document.createElement('iframe');
  iframe.frameBorder = 0;
  iframe.width = '100%';
  iframe.height = '800px';
  iframe.style.display = 'none';

  // 监听iframe加载完成事件
  iframe.onload = function() {
    // 加载完成后，把iframe插入DOM并显示，同时隐藏Loader
    $('#iframe-container').append(iframe);
    $(iframe).show();
    $('#loader').hide();
  };

  // 触发iframe加载（此时iframe还不在DOM中，浏览器不会显示目标URL）
  iframe.src = dynamicIframeSrc;
});

这个方案的优势：

• 加载过程中浏览器状态条完全看不到外部URL
• Loader会在iframe加载完成后立即消失，和你原来的window.load效果一致（因为iframe是核心外部资源）
• 完全避开跨域限制，不需要额外配置

方案二：用代理页面中转（适合URL隐藏要求极高的场景） #

如果上面的方法还不够彻底，你可以在自己的服务器上做一个简单的代理页面，让iframe先加载这个代理页面，再由代理页面去加载外部内容。这样浏览器状态条只会显示你自己的代理页面URL，完全看不到外部地址。

比如你的代理页面proxy.html可以写这样的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>代理页面</title>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; }
    iframe { width: 100%; height: 100%; border: none; }
  </style>
</head>
<body>
  <iframe id="target-iframe"></iframe>
  <script>
    // 通过URL参数获取外部地址，灵活传递目标URL
    const targetUrl = new URLSearchParams(window.location.search).get('url');
    document.getElementById('target-iframe').src = targetUrl;
  </script>
</body>
</html>

然后主页面里的iframe就可以这样设置：

// 动态生成代理页面的URL，带上外部地址参数
const proxySrc = `proxy.html?url=${encodeURIComponent(dynamicIframeSrc)}`;
// 后续按正常加载iframe的逻辑处理，Loader逻辑不变即可

这个方案适合对URL隐藏要求极高的场景，但需要你有自己的服务器来存放代理页面。

注意事项 #

• 跨域iframe的load事件是可以正常触发的，不用担心无法监听加载完成状态
• 如果你坚持要用原来的window.load事件，也可以把iframe的加载逻辑放到$(window).load()里，但其实没必要——iframe加载完成后，页面其他资源基本也加载完毕了
• 正如你所说，DOM里最终还是会出现这个URL，所以这个方法只是隐藏浏览器状态条的临时显示，无法阻止懂技术的用户查看DOM

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