iframe点击事件无效?给iframe添加点击事件?

最新推荐文章于 2024-04-29 13:49:12 发布
最新推荐文章于 2024-04-29 13:49:12 发布
阅读量2.9k 收藏 4
点赞数 1
分类专栏： iframes 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44988714/article/details/117842914
版权

iframe点击事件无效?给iframe添加点击事件?

进来了 证明我们在填坑的路上还是很相似的嘛!接下来直接上代码!

通过操作iframe的document是行不通的，不过还有有document.activeElement可供我们使用!

// c+v大法可直接使用
<body>
    <iframe id="iFrame" class="hotm" src="https://h.eqxiu.com/s/zAd1U265" frameborder="0"></iframe>

    <script>
        // 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"), function() {
            // alert('a click');
            window.location.href = "http://daishan.cunyougo.com/html/web/penglai/index.html";
        });
    </script>
</body>

粘贴复制使用的好可以吧?顺便送个一键三连吧,点赞,评论,收藏

LIU雷
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
给iframe添加点击事件
kangkang_style的博客
09-05 1万+
方案一：无本地源码iframe 存在跨域问题，所以需要用到document.activeElement 1.0处理方法： export const IframeOnClick = { resolution: 200, iframes: [], interval: null, Iframe: function () { this.element = arguments...
载入的iframe页面会挡住父级页面一切冒泡事件，怎么破?
高先生的猫
07-02 2408
最近遇到个坑，页面引入了一个iframe，结果页面上所有的点击事件都失效了。 解决办法是手动绑定iframe里面事件，在事件里面触发当前窗口事件 // 点击了不触发 document.body.addEventListener('click', () => {console.log(43434343)}) // 在iframe里面手动触发 $('#iframe').contentWindow.document.body.addEventListener('click', () => {
跨域限制导致无法触发 iframe 中内容的 onclick 事件
最新发布
Chloeeeeeeee的博客
04-29 427
如果遇到跨域限制导致无法触发 iframe 中内容的 onclick 事件，可以考虑：1. 使用 postMessage；2. 修改响应头；3. 使用代理页面
给iframe标签添加点击事件方法
u010022260的博客
01-13 7801
今天遇到一个需求，通过iframe标签引入其它页面（当前页面为a.html，被引入页面为b.html)，在b页面当中，点击一个事件之后，需要让a页面某个元素消失，但试了很多次，iframe事件无法添加，最终还是网友的力量强大，找到了两个方法，如果其它网友还有更好的办法，可以留言给我。 我找到两个方法，我全贴下面 <!DOCTYPE html> <html> <he...
iframe 无法触发 clickOutside
qq_44376306的博客
10-18 2519
记录在项目中遇到的一个问题，点击el-dropdown的外部没有将其正常关闭，请教了其他同事，在他提醒下找到了答案：原来跟iframe有关。在一个嵌入 iframe 的页面中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。
css 固定定位position:fixed 拦截了点击事件，导致后面组件无法使用@click的解决办法
ScottePerk的博客
04-10 906
我写了一个没有数据的通用界面，当网络请求没有数据的时候显示。主要代码如下，其实就是固定定位居中。这个存在很严重的问题，就是后面的控制的点击事件全部被拦截了。找了半天也没找到解决方案。最后发现只要设置下面这个属性就可以了。设置z-index是没有效果的。
关于iframe点击事件无效的解决办法
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
iframe如何动态创建及释放其所占内存
09-04
// 将iframe添加到指定的DOM元素下 dom.appendChild(iframe); // 返回创建的iframe对象，以便后续操作 return iframe; } ``` 这个函数接受三个参数：`dom`是要在其中插入`iframe`的父元素，`src`是`iframe`要...
动态生成的IFRAME，设置SRC时的问题解决分析
09-06
在这个例子中，IFRAME元素被创建并添加到DOM树中，然后设置其`src`属性为百度首页的URL。看似简单，但这里存在一个问题：当你在IE7下刷新页面（F5或使用刷新按钮）时，浏览器会发送一个额外的请求到`...
解决JS跨域访问IFrame的解决方案
08-04
通过在父页面和IFrame页面之间使用`window.postMessage()`方法发送消息，另一方可以通过监听`message`事件来接收消息。这种方式可以实现双向通信，且支持所有现代浏览器。 4. **Window.name属性**：由于`window....
IOS上iframe的滚动条失效的解决办法
09-01
在iOS设备上，如iPad和iPhone，用户可能会遇到一个特定的问题，那就是在使用`iframe`时，滚动条无法正常工作。当`iframe`的内容高度超过其设定的高度时，内部HTML的滚动条不会显示，导致超出部分的内容无法查看，...
动态生成的IFRAME，设置SRC时的，不同位置带来的影响
09-06
在尝试通过添加临时参数来强制IFRAME每次加载新内容时，如果将`src`设置在`appendChild`之后，即使动态生成参数如`(new Date().getTime().toString(36))`，在刷新时，这些参数的值也不会更新。只有在重新加载页面...
点击iframe后父页面的快捷键失效问题
singerT的博客
05-07 920
点击iframe后父页面的快捷键失效问题 在父页面设置了2个快捷键用来设置页面的缩放，点击页面中嵌入的iframe后发现两个快捷键失效了。这里采用了最笨的办法，就是在iframe文件里将这两个方法重写了一遍，唯一需要注意的是，在重写时，不能直接复制原来的方法，用jquery获取元素时需要获取的是父页面中的元素，即 $("classname",window.parent.document) ...
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
weixin_44434938的博客
12-26 4004
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
解决Iframe交互事件window.addEventListener触发多次问题
热门推荐
weixin_42125732的博客
03-24 1万+
解决addEventListener触发多次问题
jq给动态插入iframe添加点击事件
02-01
使用jQuery给动态插入的iframe添加点击事件的方法如下： 1. 首先，需要先动态插入iframe元素到文档中。可以使用jQuery的append()方法，将iframe元素添加到指定的父元素中。例如： ```javascript var iframe = $('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值