8

I'm making a widget similar to the uservoice widgets, except I want the content of the page to be in an iFrame rather than the widget appear via javascript. How can I have a full page (width/height 100%) iFrame with a div fixed to the left of the browser, an example (using javascript rather than css/html) is here: http://uservoice.com/demo

I want that widget to appear natively on the page, and the content be loaded via iFrame.

Any ideas? I can't make the iFrame fill the entire page, and also have the appear on top. I've played with z-indexes to no luck. Code example:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

            <style>
            #widget {
                left: 0px;
                position: absolute;
                top: 50%;
                display: block;
                z-index:100001;
                width: 25px;
                }
            #content {
                z-index:1;
                }
            </style>
</head> 
<body> 
    <div id="widget"> 
    widget
    </div>


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>
Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50
Peter Clark
  • 263
  • 1
  • 3
  • 6

6 Answers6

12

If you're not loading cross domain then you could just load in using jquery ajax call http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

and replace your iframe with

<div id="content"></div>
Stephen Binns
  • 765
  • 10
  • 17
6

That's "clickjacking", isn't it?

Nothing is likely to work long term, as browsers (rightly) see this as a security threat to be prevented.

brianary
  • 8,996
  • 2
  • 35
  • 29
4

You probably need to add margin:auto; to your iFrame or the floating div. This will make it fill the screen 100%.

Example:

.width {
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   width:250px;
   height:150px;
   margin:auto;
}

To fix it to the left of the browser you can use:

margin:auto auto auto 0;

Good luck!

Joshua
  • 581
  • 1
  • 4
  • 8
1

This worked for me:

  • add the overlay div with a high z-index and absolute position
  • make the iframe also positioned absolute
  • add the iframe inside a div

The div with the overlay: 

<div style="z-index:99;position:absolute;top:0;right:0">
  ...overlay html...
</div>

The iframe:

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>
miraculixx
  • 10,034
  • 2
  • 41
  • 60
1

with this code I get a double scrollbar on the right on the right. One for the website and one for the i-frame.

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>
Tinus de Beer
  • 11
  • 4
0

You could wrap your iframe in a div with a low Z-index and then lay a div over it with a higher z-index.

wilwaldon
  • 381
  • 1
  • 9
  • 26