I have a requirement to display a iframe in new popup window such that the iFrame should look like a normal content of the child page instead of iframe. Here is the code I am using.
<html>
.
.
<a class="link" href="javascript:popup();">show popup</a>
.
.
</html>
By Clicking the show popup, I am calling the javascript function there I am doing the window open. code is:
window.open('../jsp/popupPage.jsp','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1050,height=2000
And popupPage.jsp Contains the following content:
<html>
<head>
<title>Cancellation Policy</title>
</head>
<body>
<span>Blah Blah</span>
<br /><br />
<iframe src="" ></iframe>
</body>
</html>
Now the problem is iframe is displaying with border and scroll it doesn't looks good. I want something like iframe content should look like a content of normal page along with Blah Blah (iframe content)
I have used seamless property of HTML5 but that works only with chrome browser. And one more point to note here is I can't use overflow="no" as I am not sure about the width and height of the iframe page ing from 3rd site.
I have a requirement to display a iframe in new popup window such that the iFrame should look like a normal content of the child page instead of iframe. Here is the code I am using.
<html>
.
.
<a class="link" href="javascript:popup();">show popup</a>
.
.
</html>
By Clicking the show popup, I am calling the javascript function there I am doing the window open. code is:
window.open('../jsp/popupPage.jsp','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1050,height=2000
And popupPage.jsp Contains the following content:
<html>
<head>
<title>Cancellation Policy</title>
</head>
<body>
<span>Blah Blah</span>
<br /><br />
<iframe src="http://google.co.in" ></iframe>
</body>
</html>
Now the problem is iframe is displaying with border and scroll it doesn't looks good. I want something like iframe content should look like a content of normal page along with Blah Blah (iframe content)
I have used seamless property of HTML5 but that works only with chrome browser. And one more point to note here is I can't use overflow="no" as I am not sure about the width and height of the iframe page ing from 3rd site.
Share Improve this question asked Oct 28, 2013 at 14:09 786543214786543214 8554 gold badges14 silver badges31 bronze badges 1-
also can add
seamlessto your iframe tag. – carter Commented Oct 28, 2013 at 14:13
3 Answers
Reset to default 2You 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>
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.
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./od/iframes/a/iframes-and-css.htm