Convert a link into an iframe using Javascript

Question

So let's say I have a link

<a href="http://URL"></a>

In place of this link, I want to instead show an IFRAME that contains the contents of the link. Example:

<iframe src="http://URL"></iframe>

The width of this iframe would be 100% and the height of the iframe would dynamically be calculated to equal the height of the resulting page (aka the http://URL).

How would I do this with a pure Javascript solution?

Possible duplicate of [Creating an IFRAME using JavaScript](http://stackoverflow.com/questions/8726455/creating-an-iframe-using-javascript) — t.niese, May 06 '16 at 04:56
So its not as easy as i first imagined, hence my answer delete. Question. Do your `` elements have `id` names? More importantly is there any text between the `` and here ``. I don't understand how you would even be able to see those links on the page as written? Without these answers I don't know how its possible to proceed. — zipzit, May 06 '16 at 04:57
Yeah, you can add class or id to the elements and have any text in between the and — kevinkt, May 06 '16 at 07:58
@t.niese That doesn't solve my question. I'm trying to convert a link to an iframe, with Javascript adjusting the frame size. — kevinkt, May 06 '16 at 08:06
[make iframe height dynamic based on content inside- JQUERY/Javascript](http://stackoverflow.com/questions/9162933) — t.niese, May 06 '16 at 08:58

score 1 · Answer 1 · answered May 06 '16 at 05:17

You could try this, but it works only within the same domain name. It is security restrictions

<html>
<body>
    <div>
        <a href="http://example.org" class="frame">example.org</a>
    </div>
    <script>
        var links = document.getElementsByClassName('frame');
        for (var i = 0; i < links.length; i++) {
            var frame = document.createElement("iframe");
            frame.setAttribute('src', links[i].getAttribute('href'));
            frame.setAttribute('class', links[i].getAttribute('class'));
            frame.style.width = "100%";
            frame.onload = function() {
                frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
            };

            links[i].parentNode.replaceChild(frame, links[i]);
        }
    </script>
</body>
</html>

You could embed javascript code on remote server (or change server response headers) if it is yours, but I suppose it's not the case? Then try the following library, I didn't actually use it: https://github.com/davidjbradshaw/iframe-resizer — Serge, May 06 '16 at 09:54

Convert a link into an iframe using Javascript

1 Answers1