0

I've got a web page that has an iframe in it from a 3rd party web app.

The web app in the iframe has a dynamic popup menu that gets cut off at the edge of the iframe.

Is there anyway I can embed the iframe so it's allowed to show this dynamic menu outside the borders of the iframe? I fully trust the 3rd party website, but can't change any of it's code.

I doubt it's possible, as I think it'd be a security issue (clickjacking), but want to be sure.

Here's a pic of the issue, with black being the iframe border, and the red rectangle being the part that's getting cut off. enter image description here

Brad Parks
  • 66,836
  • 64
  • 257
  • 336

1 Answers1

0

I never found a way to do this exactly, and strongly suspect it's never going to work with a 3rd party website.

I did however realize that you can scale the contents of an iframe to fit the iframe, which works for me

This seems to be the best stackoverflow on it

How can I scale the content of an iframe?

Here's an example that works in Chrome, Safari and Firefox (modern) but not sure about older browsers. It shows a website embedded in an iframe, and scaled to fit the iframe size.

.wrap { width: 320px; height: 196px; padding: 0; overflow: hidden; float: left;}
.frame { width: 1280px; height: 786px; border: 1px solid black}

.frame {
    // zoom: 0.25;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
}
<p>before the iframe</p>
<div class="wrap">

<div class="wrap">
    <iframe class="frame" src="https://time.is">
    </iframe>
</div>
Brad Parks
  • 66,836
  • 64
  • 257
  • 336