替换超链接与一个iframe

我试图取代内部链接：替换超链接与一个iframe

<div class="activityinstance"> 
    <a href="http://website.com/hvp/view.php?id=515512">activity</a> 
</div>

成为：

<div class="activityinstance"> 
     <iframe src="http://website.com/hvp/view.php?id=515512"> 
      activity 
     </iframe> 
    </div>

我已经能够取代只是使用jquery一个iframe的文本。 https://codepen.io/alanpt/pen/mWJvoB

但是这被证明是相当困难的。

另一个难点是它只需要在地址中与hvp链接。

我感谢任何帮助 - 谢谢。

来源

2017-02-28 Alan Proctor-Thomson

为什么你使用正则表达式和'替换'和复杂的事情。只需使用'attr'获取href并删除链接并添加一个iframe。 –

在上面的代码中，你有一个锚（''）在div中。但是在代码中你没有它们！ –

iframe标记之间允许的唯一内容是纯文本，并且该文本仅在浏览器不支持iframe（从不现在）时才会呈现。所以对你正在做的事情没用。 – zer00ne

的样本：

<div class="activityinstance"> 
    <a href="http://website.com/hvp/view.php?id=515512">activity</a> 
</div>

[因为一个事实，即有一个IFRAME标签内HTML有没有关系，并且是一个字节完全是浪费的，我们会离开它出。而且因为这个解决方案不需要包装器，所以我们会坚持使用旧的（简单而干净的）JavaScript]。

的片段：

[].slice.call(document.links). 
    forEach( 
     function(a) { 
     if(a.href.match(/hvp/)) { 
      a.outerHTML = "<iframe src=" + a.href + "><\/iframe>" 
     } 
    });

将导致清洁HTML如：

<div class="activityinstance"> 
    <iframe src="http://website.com/hvp/view.php?id=515512"></iframe> 
</div>

...当然，没有凹痕和不必要的空格。

来源

2017-02-28 02:37:06

@Alan Proctor-Thomson 这里是你的codepen分叉演示https://codepen.io/anon/pen/aJvbaw –

感谢您的帮助。我喜欢它使用vanilla Javascript并且它非常易读。 –

$('body').ready(function(){ 
    $('.activityinstance a').each(function(){     // get all the links inside the .activeinstance elements 
     var $this = $(this);          // ... 
     var $parent = $this.parent();       // get the parent of the link 
     var href = $this.attr('href');       // get the href of the link 
     if(href.indexOf('/hvp/') == -1) return;     // if the href doesn't contain '/hvp/' then skip the rest of this function (where the replacement happens) 

     $this.remove();           // remove the link as I don't see any reasong for it to be inside the iframe 
     $parent.append('<iframe src="' + href + '"></iframe>'); // add an iframe with the src set to the href to the parent of the link 
    }); 
});

来源

2017-02-28 00:56:09

谢谢ibrahim 。但它只需要与“hvp”链接工作，而不是其他任何链接。这就是为什么我使用正则表达式。 –

@ AlanProctor-Thomson查看更新！ –

谢谢ibrahim。这很有用。并感谢有用的代码评论。 –

 $('a').replaceWith(function() { 
      var content = this; 
      return $('<iframe src="about:blank;">').one('load', function() { 
       $(this).contents().find('body').append(content); 
      }); 
     });

来源

2017-02-28 01:30:42

替换超链接与一个iframe

回答

相关问题