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

Question

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

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

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

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

PPS（避免混淆）：我控制可嵌入页面的内容，即我可以控制iframe 中的内容。但我无法控制将放置此iframe 的页面。我需要一段代码（JS/html），可以提供给其他人，这样在他们添加这段代码后，他们的页面中就会有我的内容。

Answer 1

一个非常基本的例子，所有功劳归给 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 指向的 url 可以与您现在让用户嵌入到他们自己的 iframe 中的 url 相同。

Answer 2

感谢@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()查找的元素