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

Question

我正在尝试让 iframe 拥有一个元素选择器，就像 google chrome 中的那个。我没有运气在网上找到结果，但到目前为止，我的一些想法是可能创建一个脚本来创建临时点击事件侦听器并删除任何 href，因此它不会重定向。考虑到这需要大量的替换和点击事件，这可能会对性能产生一点影响。

这是我试图在 iframe 中实现的：

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

Answer 1

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

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 的内容不是来自父页面的域，那么您将遇到由跨域策略引起的错误。您可以使用服务器端代理解决此问题，但这超出了本问题的范围。

---

这个问题非常广泛，但这可能会帮助您入门。