如何以可調整大小的方式嵌入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中的網址相同。