Question

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

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

可嵌入页面包含与tweets / 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指向的网址可能与您的用户现在嵌入自己的iframe的网址相同。

Answer 2

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

我创建了一个脚本，将动态id分配给iframe，稍后会使用此id来调整大小。（我的脚本只关注{{1}的高度如果可嵌入页面是响应式的，宽度不应该是一个问题。）

以下是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，iid是使用elem查找的元素

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

2 个答案: