Question

我有一个动态操作的文档，类似灯箱的div根据用户交互一直添加到DOM中或从DOM中删除。其中一些div包含超链接，我想确保无论何时单击任何这些锚元素，链接的文档都显示在iframe中，而不是根浏览上下文。换句话说，一旦将锚元素引入DOM，我需要确保添加到DOM的所有锚元素都将其target属性设置为值"foo"。< / p>

我想到的一个想法是使用HTMLAnchorElement原型，以便它的任何和所有原型后代都会继承其target属性的值，但我不能完全那工作。

Answer 1

如何在文档中添加点击处理程序来拦截链接点击？

$(document).on('click', '.lightbox a', function(e){
    e.preventDefault();
    var url = $(e.target).attr('href');
    // now open url in iframe
});

我愚蠢地假设你已经在使用jQuery了。如果你不是，你可以翻译它：）

Answer 2

您可以修改链接“target”属性，而不是附加事件处理程序（也可能是一种可能的解决方案）

例如，一种可能的解决方案可能是：

HTML

<iframe name="myIframe" src="" />

的Javascript

var containers, links;
containers = document.getElementsByClassName("lightbox-class"); //or whatever class lightbox have.

for (var i = 0; i < containers.length; i++) {
    links = containers[i].getElementsByTagName("a");
    for (var x = 0; x < links.length; x++) {
        links[x].target = "myIframe";
    }
}

Answer 3

那很难。元素可以通过多种方式创建，有些非常难以劫持。

但是，由于您只需在点击事件中使用它，因此可以为捕获阶段向window添加事件侦听器。这将确保您在某个其他元素停止传播之前检测到该事件。

window.addEventListener('click', function(e) {
  if(e.target.tagName.toLowerCase() === 'a') // It's an <a> element
    e.target.target = 'iframe'; // Add `target` attribute
}, true); // Capture phase

＆＃13;

window.addEventListener('click', function(e) {
  if(e.target.tagName.toLowerCase() === 'a')
    e.target.target = 'iframe';
}, true);

＆＃13;

<ul>
  <li><a href="http://wikipedia.org">Load Wikipedia</a></li>
  <li><a href="http://duckduckgo.com">Load DuckDuckGo</a></li>
  <li><a href="http://example.com">Load Example</a></li>
</ul>
<iframe name="iframe"></iframe>

＆＃13;

将属性自动设置为某个值以添加到DOM中的每个元素？

3 个答案: