javascript - jQuery - 从 iframe 动态创建的元素上的事件绑定(bind)

标签 javascript jquery iframe click

我想将 onClick 事件处理程序绑定(bind)到 iFrame 中的每个 anchor 。将 iframe 视为 IM/聊天客户端,因此在 iframe 加载时不存在 anchor 链接。我无法控制 iFrame 源,因此 anchor 不能设置任何属性。

感谢这个主题已讨论过多次,但我找不到 iFrame 的示例,并且在大量阅读后也没有成功。

我知道我应该使用 .on() 。这是我所拥有的:

HTML:

<iframe src="https://...." scrolling="no" id="chatFrame"></iframe>

JS:

// wait for frame to load
$('#chatFrame').on('load', function(){

    $('#chatFrame').on('click', 'a', function(e){
        e.preventDefaults(e);
        alert("link clicked!" );
    });
});

我没有收到任何错误,但点击时不会触发警报,并且链接会将我带到一个新窗口(如预期的默认行为)。

任何人都可以建议如何绑定(bind)到这些 iFrame anchor 吗?

最佳答案

您需要使用 contents() 进入 iframe 内部。 iframe 有自己的窗口,因此无法访问该窗口中的元素,例如 $('iframe a')

尝试

$('#chatFrame').on('load', function(){
    $(this).contents().find('body').on('click', 'a', function(e){
        e.preventDefault(e);
        alert("link clicked!" );
    });
});

这还假设 iframe 与页面位于同一域中,否则您将无法访问它

关于javascript - jQuery - 从 iframe 动态创建的元素上的事件绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41215188/

相关文章:

javascript - 如何从 JavaScript 中的 &lt;textarea&gt; 获取唯一单词的数量?

javascript - 有人可以解释一下如何像我五岁一样进行 JSONP 调用吗?

javascript - 为棘手的 Jquery 函数添加上下文

javascript - 使用javascript在客户端动态创建面包屑

javascript - BackboneJs如何循环遍历集合从每个模型中获取特定值

javascript - 如何获取输出 { a : 123, bcde : 4, f : 5, gh : 67, };在 JavaScript 中

javascript - 如何仅使用围绕变量均值生成的钟形曲线以 0.5 的增量在钟形曲线上从 1 到 10 对数组中的对象进行评分

javascript - 延迟循环 1 秒

asp.net - 显示滚动条的 rad 窗口

javascript - 如何在 Google appScripts 的 HtmlService.SandboxMode.IFRAME 中设置 iframe 属性