如何以可调整大小的方式嵌入HTML页面？

Question

我想将我使用AngularJS开发的页面嵌入到另一个第三方页面（可能/可能不使用AngularJS）。对于第三方来说，它应该就像添加一小段代码一样简单 - 就像他们从Twitter嵌入推文或从Facebook添加评论框一样。

我试过使用，但是当我的页面大于iframe的大小时，会出现我不想要的滚动条。如何嵌入我的页面，使滚动条不出现，并且嵌入式页面显示为原始第三方网站的一部分？

可嵌入页面包含类似于tweets/Fb评论框的内容。

PS：假设我无法控制第三方网站。

PPS（为了避免混淆）：我控制可嵌入页面的内容，即我可以控制iframe中的内容。但是我对这个iframe将被放置的页面没有任何控制权。我需要一段代码（JS/html），这些代码可以提供给其他人，以便在他们添加这段代码后，他们将在他们的页面中显示我的内容。

Answer 1

感谢@TheGunner指引我朝着正确的方向前进。但他没有指定调整大小的部分。因此，如果嵌入式页面大于iframe，则会出现滚动条。为了防止这种情况，您可以从可嵌入页面调用window.PostMessage，并且监听器将负责调整大小的部分。

我创建了一个脚本，动态id分配给iframe，这id以后用来调整。（我的剧本照顾只有iframe的高度。如果嵌入页面响应，宽度不宜一个问题）。

这里是widget.js的内容（这包含window.PostMessage监听器和代码来创建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); 
}; 

现在给出了下面的脚本到第三方网站，使他们能够嵌入您的小工具：

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

现在，可嵌入网页（内iframe页）应该调用window.PostMessage()如下：

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

这里iid是所获得的URL参数iid和elem是元素抬起头来使用document.getElementById()

Answer 2

一个非常简单的例子，都归功于giveforward.com：

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

包含的JavaScript文件只定义了两个功能，并将其写入自己的iframe页面。

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

iframe指向的网址可以与您将用户嵌入到自己的iframe中的网址相同。