div加载页面，并监听监听加载完成的事件

在前端开发中，可以使用 JavaScript 来实现让一个 `div` 加载页面内容，并监听加载完成的事件。这里以使用 `iframe` 作为加载页面的方式为例，因为 `iframe` 可以方便地在 `div` 中加载外部页面。以下是实现该功能的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Div 加载页面并监听加载完成事件</title> </head> <body>  <div id="myDiv">  <iframe id="myIframe" src="https://www.example.com"></iframe> </div> <script> // 获取 iframe 元素 const iframe = document.getElementById('myIframe'); // 监听 iframe 的 load 事件 iframe.addEventListener('load', function () { // 当 iframe 加载完成时，执行这里的代码 console.log('页面加载完成'); // 可以在这里进行其他操作，比如修改 div 样式等 const div = document.getElementById('myDiv'); div.style.border = '1px solid green'; }); </script> </body> </html> ``` 代码解释： 1. HTML 部分：创建了一个 `div` 元素，其 `id` 为 `myDiv`，在 `div` 内部放置了一个 `iframe` 元素，其 `id` 为 `myIframe`，并指定了要加载的页面的 `src` 属性。 2. JavaScript 部分：通过 `document.getElementById` 方法获取 `iframe` 元素，然后使用 `addEventListener` 方法监听 `iframe` 的 `load` 事件。当 `iframe` 加载完成时，会触发 `load` 事件，执行相应的回调函数。在回调函数中，打印出提示信息，并修改 `div` 的边框样式。需要小心处理的地方：我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 跨域问题：如果加载的页面与当前页面不在同一个域名下，会存在跨域问题，可能导致 `load` 事件无法正常触发，或者无法访问 `iframe` 内部的内容。 2. 加载失败处理：代码中只处理了加载成功的情况，没有处理加载失败的情况。可以监听 `error` 事件，当加载失败时进行相应的处理。 3. 性能问题：如果加载的页面内容较大，可能会导致加载时间过长，影响用户体验。可以考虑使用懒加载等技术来优化性能。 [2025-08-13 17:50:40 | AI写代码神器 | 633点数解答]

服务商

更多选项

快捷项

直通车

div加载页面，并监听监听加载完成的事件