iframe监听事件有哪些-猿码集

1. iframe监听事件概述

在网页中，iframe是一个非常方便的HTML元素，可以用来显示其他网页、嵌入广告、展示视频等。但是iframe和网页主体存在不同的文档结构，因此需要特殊处理。在这种情况下，iframe监听事件就是非常有用的工具。通过监听iframe中的事件，可以在主页中处理iframe中发生的事件，例如当iframe中的表单提交时，可以在主页中接收并处理提交的数据。

下面我们将介绍常见的iframe监听事件。

2. iframe加载事件

iframe的加载事件有两个：

2.1 onload事件

在iframe加载完毕后触发，可以用来检测iframe是否已经加载成功。


<iframe src="example.html" onload="alert('iframe已经加载完毕！')"></iframe>

2.2 onreadystatechange事件

在iframe的状态发生变化时触发，状态有5个：uninitialized(未初始化)、loading(正在加载)、loaded(已加载)、interactive(交互中)和complete(加载完成)。


<iframe src="example.html" onreadystatechange="if(this.readyState=='complete')alert('iframe已经加载完毕！')"></iframe>

3. iframe跨域通信事件

在同一域名下的iframe之间可以直接访问彼此的属性和方法，但是对于不同域名的iframe之间，由于同源策略的限制，无法直接通信。这时就需要使用跨域通信事件。

3.1 postMessage事件

使用postMessage事件可以在两个不同域名的网页之间实现双向通信。


//iframe的HTML代码
<script>
    //给自己的消息事件添加监听器
    window.addEventListener('message',function(event){
        if(event.origin!='http://example.com')
            return;
        console.log(event.data);
    });
</script>
//父页面的JavaScript代码
var frame = document.getElementById('myiframe').contentWindow;
frame.postMessage('Hello world!','http://example.com');

在iframe中，通过addEventListener函数向窗口添加消息事件的监听器。在父页面中，通过contentWindow属性获取iframe窗口的引用，并使用postMessage函数向iframe窗口发送消息。

3.2 hashchange事件

使用hashchange事件可以在同一域名下的网页之间实现双向通信。当iframe的URL的hash部分发生改变时，会触发hashchange事件，可以通过监听hashchange事件在主页中处理iframe中的URL变化事件。


//iframe的HTML代码
<script>
    window.onhashchange = function(){
        parent.postMessage(location.hash,'http://example.com');
    };
</script>
//主页面的JavaScript代码
window.addEventListener('message',function(event){
    if(event.origin!='http://example.com')
        return;
    console.log(event.data);
});

4. iframe键盘事件

使用键盘事件可以在iframe中检测到用户的按键操作。

4.1 onload事件

在iframe加载完毕后触发，可以用来检测iframe是否已经加载成功。


<iframe src="example.html" onload="alert('iframe已经加载完毕！')"></iframe>

4.2 onreadystatechange事件

在iframe的状态发生变化时触发，状态有5个：uninitialized(未初始化)、loading(正在加载)、loaded(已加载)、interactive(交互中)和complete(加载完成)。


<iframe src="example.html" onreadystatechange="if(this.readyState=='complete')alert('iframe已经加载完毕！')"></iframe>

5. iframe动画事件

使用动画事件可以在iframe中实现交互式的动画效果。

5.1 onanimationstart/onanimationend事件

在CSS动画开始/结束时触发。


// iframe的HTML代码
<style>
    #box{animation:myanim 3s;}
    @keyframes myanim{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }
</style>
<div id="box" onanimationstart="alert('动画已经开始！')" onanimationend="alert('动画已经结束！')"></div>

5.2 ontransitionrun/ontransitionstart/ontransitionend事件

在CSS过渡开始/运行/结束时触发。


// iframe的HTML代码
<style>
    #box{transition:all 3s;}
    #box:hover{transform:rotate(360deg);}
</style>
<div id="box" ontransitionstart="alert('过渡已经开始！')" ontransitionrun="alert('过渡正在运行！')" ontransitionend="alert('过渡已经结束！')"></div>

6. 总结

以上就是常见的iframe监听事件了，使用这些事件可以使iframe更加灵活。需要注意的是，在使用跨域通信事件时要特别注意安全，防止恶意代码的注入和窃听。

iframe监听事件有哪些