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.

Answers 1

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


Related Articles