1

我需要在新的弹出窗口中显示 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 内容这样的东西应该看起来像普通页面的内容以及 Blah Blah（iframe 内容）

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

4

3 回答 3

2

You can add the following tag when you declare your iframe.

 frameBorder="0"

Your tag would look like this

<iframe  frameBorder="0" src="http://google.co.in" ></iframe>
于 2013-10-28T14:11:48.743 回答
1

You can use the following CSS to get rid of the borders:

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

If you want to spread the iframe's dimensions, you would have to read the document dimensions inside the iframe and pass them to the parent document. This can be achieved by postMessage() function.
Add this javascript to the popupPage.jsp

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

Then, in your popup() function, right before window.open you should add this:

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

To learn more about postMessage and message event read this MDN article.

于 2013-10-28T14:13:04.283 回答
0

Please add the frameBorder and scrolling,

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

More about Frames and Styling, you can visit: http://webdesign.about.com/od/iframes/a/iframes-and-css.htm

于 2013-10-28T14:12:07.927 回答