如何以可調整大小的方式嵌入HTML頁面？

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 ，並且偵聽器將負責調整大小。

我創建了一個腳本，該腳本為iframe分配了動態id ，以后將使用該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()查找的元素