CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
786543214
786543214

Reputation: 855

Iframe without border and scroll in popup

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 coming from 3rd site.

Upvotes: 1

Views: 21043

Answers (3)

matewka
matewka

Reputation: 10158

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.

Upvotes: 1

Krish R
Krish R

Reputation: 22721

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

Upvotes: 0

LondonAppDev
LondonAppDev

Reputation: 9653

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>

Upvotes: 2

Related Questions