Question

我正在尝试更换内部链接：

<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链接。

我感谢任何帮助 - 谢谢。

Answer 1

$('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
    });
});

Answer 2

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

Answer 3

以下样本：

<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>

...当然，没有缩进和不必要的空格。

用iframe替换超链接

3 个答案: