如何实现iframe元素选择器？ （如镀铬）

Question

我正在尝试让iframe具有一个元素选择器，例如google chrome中的那个。我没有在网上找到结果的运气，但是到目前为止，我的一些想法是创建一个脚本，该脚本创建临时的单击事件侦听器并删除任何href，以便它不会重定向。考虑到这需要大量的替换和点击事件，这可能会有点性能负担。

这就是我要在iframe中实现的内容：

当然，除了没有检查员本身。

Answer 1

假设您可以修改iframe的内容，则可以在整个文档中添加一个click事件监听器，以使目标被单击并阻止执行默认操作。然后，您可以使用目标并为其设置样式或显示有关它的信息。

document.addEventListener( 'click', function( e ) {
    e.preventDefault();

    e = e || window.event;
    var target = e.target || e.srcElement;

    // now that you have the target and you've prevented
    // the default action such as redirecting to a href,
    // you can style the target or do whatever you want
    // to it.
    target.classList.add ( "selected" );

}, false );

这不应该是绩效税。

如果您无法修改iframe的内容，但是iframe的内容与父页面位于同一域中，则仍可以使用jQuery函数定位iframe的文档。您可以像上面这样添加事件监听器：

var iframe = document.getElementById('your-iframe-id');
var iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
iframe_doc.addEventListener( 'click', function( e ) {
    ...

如果iframe的内容不是来自父页面的域，则您将遇到由跨域策略引起的错误。您可以通过使用服务器端代理来解决此问题，但这超出了此问题的范围。

---

问题非常广泛，但这可能有助于您入门。