Javascript Iframe无边框并在弹出窗口中滚动_Javascript_Jquery_Html_Css_Iframe

Javascript Iframe无边框并在弹出窗口中滚动

javascript jquery html css iframe

Javascript Iframe无边框并在弹出窗口中滚动,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我需要在新的弹出窗口中显示iframe，这样iframe应该看起来像子页面的正常内容，而不是iframe。这是我正在使用的代码 <html> . . <a class="link" href="javascript:popup();">show popup</a> . . </html> 而popupPage.jsp包含以下内容： <html> <head> <title>Cancellation Polic

我需要在新的弹出窗口中显示iframe，这样iframe应该看起来像子页面的正常内容，而不是iframe。这是我正在使用的代码

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

而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页面的宽度和高度。

您可以在声明iframe时添加以下标记

 frameBorder="0"

你的标签应该是这样的

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

请添加框架边框和滚动

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

浏览器不受支持

有关框架和样式的更多信息，您可以访问：

您可以使用以下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>

要了解有关

postMessage

和

message

事件的更多信息，请阅读

还可以将

无缝

添加到iframe标记中。

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

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