沒有邊框的iframe和滾動彈出

我有一個要求，在新的彈出窗口中顯示一個iframe，使iFrame應該看起來像一個普通的子頁面內容而不是iframe。這是我正在使用的代碼。沒有邊框的iframe和滾動彈出

<html> 
. 
. 
<a class="link" href="javascript:popup();">show popup</a> 
. 
. 
</html>

通過單擊顯示彈出窗口，我打電話給那裏的JavaScript函數，我正在打開窗口。代碼：

window.open('../jsp/popupPage.jsp','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1050,height=2000

而且popupPage.jsp包含以下內容：

<html> 
<head> 
<title>Cancellation Policy</title> 
</head> 
<body> 

<span>Blah Blah</span> 
<br /><br /> 
<iframe src="http://google.co.in" ></iframe> 

</body> 
</html>

現在的問題是IFRAME與邊框顯示，並滾動它並不好看。我想是這樣的iframe的內容應該像正常的頁面與等等等等（iframe中的內容）以及內容

我已經使用HTML5的無縫財產但這僅適用於Chrome瀏覽器。還有一點需要注意的是，我不能使用overflow =「no」，因爲我不確定iframe頁面的寬度和高度來自第三方網站。

來源

2013-10-28 user2823355

也可以添加'無縫'到你的iframe標籤。 – carter

當您聲明您的iframe時，您可以添加以下標記。

frameBorder="0"

您的代碼看起來像這樣

<iframe frameBorder="0" src="http://google.co.in" ></iframe>

來源

2013-10-28 14:11:48

請加上FRAMEBORDER和滾動，

<iframe src="URL" scrolling="no" frameBorder="0">Browser not supported</iframe>

更多關於框架和樣式，你可以訪問：http://webdesign.about.com/od/iframes/a/iframes-and-css.htm

來源

2013-10-28 14:12:07

你可以使用下面的CSS來擺脫邊界：

iframe { 
    border: none; 
    outline: none; 
    overflow: hidden; 
}

如果您想分散iframe的尺寸，您必須閱讀iframe內的文檔尺寸並將它們傳遞給父文檔。這可以通過postMessage()函數來實現。
這個JavaScript添加到popupPage.jsp

<script> 
    window.addEventListener('load', function() { 
     window.parent.postMessage(document.body.clientWidth + ";" + document.body.clientHeight); 
    }, false); 
</script>

然後，在你popup()功能，window.open前的權利，你應該補充一點：

window.addEventListener('message', function(e) { 
    var iframe = document.getElementById('iframe'); //or whatever your iframe is called 
    var dimensions = e.data.split(";"); 
    iframe.width = dimensions[0]; 
    iframe.height = dimensions[1]; 
}, false);

要了解更多關於postMessage和message事件讀this MDN article。

來源

2013-10-28 14:13:04 matewka

沒有邊框的iframe和滾動彈出

回答

相關問題