iframe的onload事件

本文详细介绍了在使用动态创建的iframe时遇到的onload事件不触发问题,特别针对IE浏览器进行了深入分析,并提供了有效的解决方法。通过使用attachEvent函数注册事件监听器,可以确保在IE下iframe的onload事件能够正常触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、背景

在页面中放了一个display:none的iframe,当用户点击一个button时,用该iframe去拉取一个网页,并将iframe显示出来。

2、问题

给iframe添加了onload事件,当iframe显示出来后,不关闭,并再次点击button,在IE下onload事件不触发。

3、问题分析与解决办法

IE 支持 iframe 的 onload 事件,不过对动态创建和修改的onload事件函数没有反应(不会被触发),如:

iframe.onload = function(){alert(1)};
而需要通过 attachEvent 来注册:

FaddEvent('iframeid', 'load', function(){alert(1)}, true);

function addEvent(e,evt,fn,isID)
{
    if(isID==true) e=Fid(e);
    if(e.attachEvent && 
       (typeof(e.attachEvent)=="function" || typeof(e.attachEvent)=="object"))
    {
        e.attachEvent("on"+evt,fn);
    }
    else if(e.addEventListener && 
        (typeof(e.addEventListener)=="function" || typeof(e.addEventListener)=="object"))
    {
        e.addEventListener(evt,fn,false);
    }
}




### 如何在 iframe onload 事件中传递参数 在 iframe 的 `onload` 事件中传递参数,可以通过多种方式实现。以下是几种常见且有效的方法: 1. **使用 `postMessage` 方法** 在父页面中,当 iframe 加载完成后,可以利用 `postMessage` 方法将数据发送到子页面[^1]。例如,在 Vue.js 环境中,可以这样操作: ```javascript let Frame = this.$refs["Frame"]; // 获取 DOM 元素 var obj = this.$store.state.token; // 要传递的参数 if (Frame.attachEvent) { // 兼容旧版 IE 浏览器 Frame.attachEvent("onload", function() { let iframeWin = Frame.contentWindow; iframeWin.postMessage(obj, 'https://xxxx.xx.xx'); // obj 是传递的参数 }); } else { Frame.onload = function() { let iframeWin = Frame.contentWindow; iframeWin.postMessage(obj, 'https://xxxx.xx.xx'); // obj 是传递的参数 }; } ``` 子页面需要监听 `message` 事件以接收数据: ```javascript window.addEventListener('message', function(event) { if (event.origin !== 'https://xxxx.xx.xx') return; // 验证来源 console.log('接收到的参数:', event.data); }); ``` 2. **通过 URL 参数传递** 可以在 iframe 的 `src` 属性中直接附加参数,子页面通过解析 URL 获取参数[^3]。例如: ```html <iframe id="miao" src="B.html"></iframe> ``` 在父页面中动态设置 iframe 的 `src` 属性: ```javascript window.onload = function() { var v = document.getElementById("miao"); v.src = "C.html?p=" + UrlValue("p"); // 动态设置参数 }; function UrlValue(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } ``` 子页面可以通过以下代码获取参数: ```javascript function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] === variable) { return decodeURIComponent(pair[1]); } } return null; } console.log('接收到的参数:', getQueryVariable('p')); ``` 3. **通过表单提交伪造 AJAX 请求** 如果需要通过 iframe 模拟 AJAX 请求并传递参数,可以使用隐藏的 iframe 和表单[^2]。例如: ```html <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <form id="fm1" action="AjaxFile.html" method="post" enctype="multipart/form-data" target="ifm1"> {% csrf_token %} <input type="file" value="提交" multiple="" name="image" onchange="uploadfile3()"> </form> ``` 当用户选择文件时,触发 `onchange` 事件提交表单,参数会通过 POST 方式传递到目标地址。 4. **通过全局变量或存储机制** 如果父子页面同源,可以直接通过全局变量或共享存储(如 `localStorage` 或 `sessionStorage`)进行参数传递。例如: ```javascript // 父页面设置参数 localStorage.setItem('sharedData', JSON.stringify({ key: 'value' })); // 子页面读取参数 window.onload = function() { var data = JSON.parse(localStorage.getItem('sharedData')); console.log('接收到的参数:', data); }; ``` ### 注意事项 - 使用 `postMessage` 时需验证消息来源,防止跨站脚本攻击。 - 如果通过 URL 参数传递,需确保参数不会泄露敏感信息。 - 对于跨域场景,推荐使用 `postMessage` 或其他跨域通信技术。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值