javascript - Display element outside of iframe - Stack Overflow

admin管理员组

文章数量:1193935

Is it possible to show poshytip from iframe so it is also displaying outside of iframe? Eg. like overflow: visible..

And if not, then how hard would be to display poshytip for parent document and position it relative to my content? What are browser security measures?

NB! Iframe has a fixed height!

Like so:

    +----------------------------+
    |         POSHYTIP           |
    |                            |
    |                            |
    |                            |
    +--\  /----------------------+
+-------\/---------------------------------------------------------+
|             IFRAME BANNER                                        |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

Cheers!

Is it possible to show poshytip from iframe so it is also displaying outside of iframe? Eg. like overflow: visible..

And if not, then how hard would be to display poshytip for parent document and position it relative to my content? What are browser security measures?

NB! Iframe has a fixed height!

Like so:

    +----------------------------+
    |         POSHYTIP           |
    |                            |
    |                            |
    |                            |
    +--\  /----------------------+
+-------\/---------------------------------------------------------+
|             IFRAME BANNER                                        |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

Cheers!

• javascript
• html
• css
• iframe

Share Improve this question Follow edited Sep 6, 2012 at 12:17 Kristian asked Sep 6, 2012 at 12:10 KristianKristian 3,46133 gold badges3131 silver badges5252 bronze badges 13

• I don't think that will be possible, and if I am wrong it will most likely not be a pretty solution. However, is there a reason you cant have your tooltip go down instead of up? Or is there a reason you have to use the iframe at all? – Josh Mein Commented Sep 6, 2012 at 12:12
• That depends on banner location. If banner is at top of the page, then i should go down and wen bottom of the page, the it should go up. – Kristian Commented Sep 6, 2012 at 12:14
• 1 It's not possible. Think of an iFrame as a separate browser window residing within your document. Cannot be done. – Kyle Commented Sep 6, 2012 at 12:14
• Are you just displaying an ad within the iframe? Is there a reason why you have to use an iframe? – Josh Mein Commented Sep 6, 2012 at 12:14
• Yes, it goes on othes sites. Think of it as and iframe advertisment. – Kristian Commented Sep 6, 2012 at 12:15

 |  Show 8 more comments

5 Answers 5

Sorted by: Reset to default 13

This is not possible. An iFrame is in essence a separate browser window inside document that references other pages. (As you said, it's an advertisement banner module.)

You'll have to place the tooltip to reference the iframe itself if you want a tooltip.

I think it's possible, but it not straightforward and simple. You can modify/extend the plugin that will appending the tooltip element to window.parent.body. Make it position absolute and calculate the position.

Of course it can be done if both frames/iframes not violates same origin policy.

Unfortunately, it's not possible.

<iframe> is another separate browser window. It's just a means of 'seeing' inside that web document through your parent document. It's different than a normal in which you can extend elements outside of its margins.

Also, it is considered a security vulnerability for other sites to be able to place content outside their given space.

As already mentioned it is impossible to do what you are asking with an iFrame as it is in essence a separate browser. Have you though about changing the looks/reaction of the banner on hover? You could easily change the banner image and show a little information to the user.

Since this is an ad that from what you have said will be on sites you cannot change, you will not have access to change the page the ad is displayed on; therefore, your ad needs to be completely functional in and of itself.

To deal with the problem, I defined an iframe with a bigger width/height, and I gave the main div inside the iframe the width/height according to the actual size I need. And so the inner div can contain an element that comes out of it, while still inside the iframe, but for the user it looks like it is outside the iframe.

<html>
    <body>
        <div style="background: gray; height: 300px; width: 300px;" >
            <iframe src="..." style="width: 200px; height: 200px;" >
                <html>
                    <body>
                        <div id="MainDivInTheFrame" style="border: 3px solid red; width: 100px; height: 100px;" >
                            <div>
                                all the main content of the iframe
                            </div>
                            <div style="position: absolute; bottom: 0; left: 0;" >
                                inside the iframe, but looks like it is outside the iframe
                            </div>
                        </div>
                    </body>
                </html>
            </iframe>
        </div>
    </body>
</html>

see the output image:

element outside an iframe

本文标签： javascriptDisplay element outside of iframeStack Overflow