给iframe标签添加点击事件方法

最新推荐文章于 2024-07-08 15:34:48 发布

xiaoshulin520

最新推荐文章于 2024-07-08 15:34:48 发布

阅读量7.9k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/u010022260/article/details/103961785

版权

今天遇到一个需求，通过iframe标签引入其它页面（当前页面为a.html，被引入页面为b.html)，在b页面当中，点击一个事件之后，需要让a页面某个元素消失，但试了很多次，iframe事件无法添加，最终还是网友的力量强大，找到了两个方法，如果其它网友还有更好的办法，可以留言给我。

我找到两个方法，我全贴下面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#box {
			width: 500px;
			height: 600px;
			background: #ccc;
		}
	</style>

	<body>
		<div id="box">
			<iframe id="iframe_css" data-types="click" src="b.html" width="300" height="600"></iframe>
		</div>
	</body>

	<script type="text/javascript">
	 
    //第一种给iframe添加点击方法
  /*  setit()
		function setit() {
			if(document.all) {
				document.getElementById("iframe_css").attachEvent("click", dothis);
			} else {
				document.getElementById("iframe_css").contentWindow.addEventListener("click", dothis, false);
			}
		}

		function dothis() {
			console.log("blurred");
			}*/
			
			/
		
	 
	 
	 //第二种给iframe 添加点击方法
			var IframeOnClick = {
				resolution: 200,
				iframes: [],
				interval: null,
				Iframe: function() {
					this.element = arguments[0];
					this.cb = arguments[1];
					this.hasTracked = false;
				},
				track: function(element, cb) {
					this.iframes.push(new this.Iframe(element, cb));
					if(!this.interval) {
						var _this = this;
						this.interval = setInterval(function() {
							_this.checkClick();
						}, this.resolution);
					}
				},
				checkClick: function() {
					if(document.activeElement) {
						var activeElement = document.activeElement;
						for(var i in this.iframes) {
							if(activeElement === this.iframes[i].element) { // user is in this Iframe  
								if(this.iframes[i].hasTracked == false) {
									this.iframes[i].cb.apply(window, []);
									this.iframes[i].hasTracked = true;
								}
							} else {
								this.iframes[i].hasTracked = false;
							}
						}
					}
				}
			};

			IframeOnClick.track(document.getElementById("iframe_css"), function() {
				 console.log(1231231231)
			});
			
	</script>

</html>

如果有错误，欢迎留言指正

转载
https://blog.csdn.net/u011151452/article/details/52353566

https://blog.csdn.net/weixin_30652491/article/details/99429325