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

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

我尝试使用

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

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

PS：假设我对第三方网站没有控制权

---

PPS（避免混淆）：我控制可嵌入页面的内容，即我可以控制

iframe

中的内容。但是我无法控制这个

iframe

将被放置的页面。我需要一段代码（JS/html），可以提供给其他人，这样在他们添加这段代码后，他们将在他们的页面中包含我的内容。

一个非常基本的示例，所有内容都归功于giveforward.com：

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

---

iframe指向的url可以与您让用户现在嵌入到自己iframe的url相同。

感谢@TheGunner为我指明了正确的方向。但他没有指定调整大小的部分。因此，如果嵌入的页面大于

iframe

，则会出现滚动条。为了防止这种情况，您可以从可嵌入页面调用

window.PostMessage

，侦听器将负责调整大小部分

我创建了一个脚本，该脚本将动态

id

分配给

iframe

，该

id

稍后用于调整大小。（我的脚本只关注

iframe

的高度。如果可嵌入页面响应，宽度不应该是问题）

以下是

widget.js

的内容（其中包含

窗口.PostMessage

侦听器和创建

iframe

）的代码：

---

这里的

iid

是获得的URL参数

iid

，而

elem

是使用

document.getElementById（）

查找的元素。这个措辞让我感到困惑。您是否控制

iframe

的内容？我控制

iframe

的内容。但是我无法控制放置

iframe

的页面。很抱歉给你带来了困惑。我将编辑这个问题也许你可以做一个小的javascript代码片段，第三方将其包含在div或其他容器的id中，然后你的javascript可以将它自己的iframe嵌入其中？这样你就可以更好地控制iframe本身了。对我来说，你的页面似乎需要一个响应性强的布局。看看你是如何根据iframe的高度/宽度调整内容的。我之前的评论是大多数其他内容提供商如何完成同样的任务，包括twitter。感谢@TheGunner为我指明了正确的方向。但是您的答案没有指定调整大小的部分，它包含特定于该网站的代码。我已经创建了一个脚本，它应该是通用的。将其作为答案发布。谢谢你的意见。干杯

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

(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>

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