How to embed HTML page in a resizeable way?

Question

I want to embed a page developed by me using AngularJS into another third-party page (that may/may not be using AngularJS). To the third party it should be just as simple as adding a small piece of code - just like what they do to embed tweets from Twitter or add a comment box from Facebook.

I tried using <iframe> , but when my page is larger than iframe's size, scroll bars appear which I don't want. How to embed my page so that scroll bars don't appear and it appears that the embedded page is part of the original third-party website?

The embeddable page contains something similar to tweets/Fb comment box.

PS: Assume I have no control over the third-party sites.

PPS (to avoid the confusion): I control the content of the embeddable page ie I have control over what's there inside the iframe . But I don't have any control over the page where this iframe will be put. I need a piece of code (JS/html) which can be given to others so that after they add this piece of code, they will have my content in their page.

Answer 1

A very basic example, all credit goes to giveforward.com:

<script type="text/javascript" src="https://www.giveforward.com/widget.js">
</script>
<script type="text/javascript">
    BuildWidget('c8c3');
</script>

the included javascript file simply defines a couple of functions and writes it's own iframe to the page.

function BuildWidget(fid)
{
  makeFrame(fid);
}

function makeFrame(fid) 
{
   document.write('<iframe frameborder="0" scrolling="no" src="https://www.giveforward.com/widgets/w/'+fid+'/?m=1" style="min-width: 240px; width:100%; max-width:295px; height: 450px;margin:auto;display:block;"></iframe>');
}

function BuildAffiliateWidget(affid, packet) {
  if(typeof packet == 'object')
  {
    refid = (typeof packet.refid == 'undefined') ? '' : '&refid=' + packet.refid;
    category = (typeof packet.category == 'undefined') ? '' : '&category=' + packet.category;
    title = (typeof packet.title == 'undefined') ? '' : '&title=' + encodeURIComponent(packet.title);
    callback = (typeof packet.callback == 'undefined') ? '' : '&callback=' + packet.callback;
    gfid = (typeof packet.gfid == 'undefined') ? '' : '&gfid=' + packet.gfid;
  }else
  {
    refid = title = category = callback = gfid = '';
  }
  document.write('<iframe frameborder="0" scrolling="no" src="https://www.giveforward.com/widgets/a/?m=1&affid=' + affid + refid + category + title + callback + gfid + '" style="min-width: 240px; width: 100%; max-width:295px; height:450px;margin:auto;display:block;" class="affiliate_iframe"></iframe>');
}

The url that the iframe points to can be the same url that you are having your users embed to their own iframe now.

Answer 2

Thanks to @TheGunner for pointing me in the right direction. But he didn't specify the resizing part. So if the embedded page is bigger than the iframe then scroll bars would appear. To prevent this, you can call window.PostMessage from the embeddable page and the listener will take care of the resizing part.

I have created a script which assigns dynamic id to the iframe , and this id is used later to resize.(My script takes care only the height of the iframe . If the embeddable page is responsive, width shouldn't be a problem).

Here is the content of widget.js (this contains the window.PostMessage listener and the code to create iframe ):

(function() {
var func = function(e){
    if (e.data.indexOf('iid:') === 0) {
        var hashPos = e.data.indexOf('#');
        var iid = e.data.substring('iid:'.length, hashPos);
        var height = e.data.substring(hashPos + 1) + 'px';
        document.getElementById(iid).style.height = height;
    }
};
var old = window.onmessage;
if (typeof window.onmessage != 'function') {
    window.onmessage = func;
} else {
    window.onmessage = function (e, f, g, h) {
        if (old) {
            old(e, f, g, h);
        }
        func(e);
    };
}
}());
var BuildWidget = function(url, width) {
    var getNewIid = function() {
        return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    };

    var iid = getNewIid();
    if(!width) {
        width = 900;
    }
    var maxWidth = width + 'px';
    document.write('<iframe id="' + iid + '" src="' + url + '?iid=' + iid + '" frameborder="0" scrolling="no" style="min-width: 300px; width:100%; max-width:' + maxWidth + '; display:block;"></iframe>');
};

var AddXWidget = function(width) {
     var url = 'http://localhost:8080/embed';
     BuildWidget(url, width);
};

Now give out the following script to third-party sites to enable them to embed your widget:

<script type="text/javascript" src="http://path/to/widget.js">
</script>
<script>
     AddXWidget(400);
</script>

Now, the embeddable page(the page inside iframe ) should call window.PostMessage() as follows:

window.top.postMessage('iid:' + iid + '#' + elem.scrollHeight, '*');

Here iid is the URL parameter iid obtained and elem is the element looked up using document.getElementById()