没有边框的 Iframe 并在弹出窗口中滚动

Iframe without border and scroll in popup

本文关键字：窗口 滚动 边框 Iframe      更新时间：2023-09-26

我需要在新的弹出窗口中显示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

和弹出页面.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 内容这样的东西应该看起来像普通页面的内容以及 Blah Blah（内嵌内容）

我使用了HTML5的无缝属性，但这仅适用于chrome浏览器。这里需要注意的另一点是我不能使用 overflow="no"，因为我不确定来自第 3 个站点的 iframe 页面的宽度和高度。

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

 frameBorder="0"

您的代码将如下所示

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

您可以使用以下 CSS 来去除边框：

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

如果要展开 iframe 的尺寸，则必须读取 iframe 中的文档尺寸并将其传递给父文档。这可以通过postMessage()功能来实现。
将此 javascript 添加到弹出窗口页面.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事件的更多信息，请阅读此MDN文章。

请添加框架边框和滚动，

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

有关框架和样式的更多信息，您可以访问：http://webdesign.about.com/od/iframes/a/iframes-and-css.htm

相关文章：