CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Alan Proctor-Thomson
Alan Proctor-Thomson

Reputation: 23

Replace a hyperlink with an iframe

I am trying to replace internal links:

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

to become:

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

I have been able to replace just the text with an iframe using jquery. https://codepen.io/alanpt/pen/mWJvoB

But this is proving to be quite hard.

Another difficulty is that it needs to only be links with hvp in the address.

I appreciate any help - thanks.

Upvotes: 2

Views: 226

Answers (3)

Bekim Bacaj
Bekim Bacaj

Reputation: 5955

A sample of:

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

[Because of a fact that having HTML inside of an IFRAME tags has no bearing, and is a complete waste of bytes, we will leave it out. And because this solution doesn't need wrappers, we'll stick to the good old (plain and clean) JavaScript].

The snippet: 

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

will result in clean HTML such as: 

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

...of course, without indentations and unnecessary white-spaces.

Upvotes: 0

ibrahim mahrir
ibrahim mahrir

Reputation: 31682

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

Upvotes: 1

holi-java
holi-java

Reputation: 30676

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

Upvotes: 0

Related Questions