use window.innerWidth to calcualte width

Question

use window.innerWidth to calcualte width

mbrevda opened this issue 9 years ago · 26 comments

Im on a page where a parent has a min-width set which causes the iframe to size incorrectly. Is there any way to calculate the width based on window.innerWidth?

Answer 1 · 2016-06-13T12:53:40.000Z

Interesting idea.

Answer 2 · 2016-06-13T12:54:45.000Z

Welcome a PR if you have a moment to take a look and see if this works.

Answer 3 · 2016-06-13T15:18:58.000Z

Would love to and might still, simply swamped atm. Was thinking of allowing a function as instead of one of the predefined string so that this is extendable to other use cases in the future.

Thoughts?

Answer 4 · 2016-06-13T17:26:28.000Z

I've thought about allowing a custom function to be written in the iFrame. This couldn't be passed from the parent, as that would be a major security problem.

Answer 5 · 2016-06-13T18:21:18.000Z

Aren't the size options on the parent? I.e. isn't it the parents job to
determine the size the iframe should be?

On Mon, Jun 13, 2016, 8:26 PM David J. Bradshaw notifications@github.com
wrote:

I've thought about allowing a custom function to be written in the iFrame.
This couldn't be passed from the parent, as that would be a major security
problem.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#373 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAR4jFjeB3NkkxZwpcItmQPCLmR0YO00ks5qLZLPgaJpZM4IyHy3
.

Answer 6 · 2016-06-13T19:38:36.000Z

Yes, but their is an option in the iFrame to override this.

https://github.com/davidjbradshaw/iframe-resizer#heightcalculationmethod--widthcalculationmethod

Rather than pass a string, could make it an option to pass a function.

If you pass a function from the parent page, you create an attack vector for dodgy code.

Answer 7 · 2016-06-13T21:03:19.000Z

Perhaps it should just be settable in the parent?

On Mon, Jun 13, 2016 at 10:38 PM David J. Bradshaw notifications@github.com
wrote:

Yes, but their is an option in the iFrame to override this.

https://github.com/davidjbradshaw/iframe-resizer#heightcalculationmethod--widthcalculationmethod

Rather than pass a string, could make it an option to pass a function.

If you pass a function from the parent page, you create an attack vector
for dodgy code.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#373 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAR4jD2pgREzYHlhL2VfcqVJXoR73lC3ks5qLbHCgaJpZM4IyHy3
.

Answer 8 · 2016-06-13T21:13:56.000Z

I had a thought about this and just added the ability to add custom sizing methods on the dev branch. This is really untested, and hopefully I will have some more time to write some tests and an example later this week, but in the meantime you should hopefully be able to do the following in the iFrame now.

<script>
    window.iFrameResizer = {
        widthCalcMethod: function() {
            return window.innerWidth;
        }
    }
</script>
<script src="js/iframeresizer.contentwindow.js"></script>

Oh and let me know if it really does work...

Answer 9 · 2016-06-13T21:42:58.000Z

No, Im afraid it doesn't work No change in size detected

Answer 10 · 2016-06-13T21:55:52.000Z

Could post the log output?

Answer 11 · 2016-06-13T21:58:26.000Z

[iFrameSizer][Host page: xxxxxx] [iFrame.onload] Sending msg to iframe[xxxxxx] (xxxxxx:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Initialising iFrame (https://yyyyy.xxxxxx.net/)
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] TargetOrigin for parent set to: *
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] HTML & body height set to "auto"
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Enable public methods
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Animation Start
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Animation Iteration
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Animation End
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Input
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Mouse Up
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Mouse Down
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Orientation Change
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Print
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Ready State Change
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Touch Start
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Touch End
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Touch Cancel
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Transition Start
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Transition Iteration
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Add event listener: Transition End
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Create body MutationObserver
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] In page linking not enabled
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event lock on
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Sending message to host page (xxxxxx:770:967:init)
host.js:1 [iFrameSizer][Host page: xxxxxx] Received: [iFrameSizer]xxxxxx:770:967:init
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking connection is from: https://yyyyy.xxxxxx.net
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking height is in range 0-Infinity
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking width is in range 0-Infinity
host.js:1 [iFrameSizer][Host page: xxxxxx] IFrame (xxxxxx) height set to 770px
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event lock off
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] --
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: mutationObserver: [object HTMLDivElement] attributes
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
aggregated.js:1 The value "640px" for key "width" was truncated to its numeric prefix.
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event lock on
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Sending message to host page (xxxxxx:883:640:resizeParent)
host.js:1 [iFrameSizer][Host page: xxxxxx] Received: [iFrameSizer]xxxxxx:883:640:resizeParent
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking connection is from: https://yyyyy.xxxxxx.net
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking height is in range 0-Infinity
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking width is in range 0-Infinity
host.js:1 [iFrameSizer][Host page: xxxxxx] Requesting animation frame
host.js:1 [iFrameSizer][Host page: xxxxxx] IFrame (xxxxxx) height set to 883px
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event lock off
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] --
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
aggregated.js:1 The value "640px" for key "width" was truncated to its numeric prefix.
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
aggregated.js:1 The value "640px" for key "width" was truncated to its numeric prefix.
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event lock on
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Sending message to host page (xxxxxx:770:1088:resizeParent)
host.js:1 [iFrameSizer][Host page: xxxxxx] Received: [iFrameSizer]xxxxxx:770:1088:resizeParent
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking connection is from: https://yyyyy.xxxxxx.net
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking height is in range 0-Infinity
host.js:1 [iFrameSizer][Host page: xxxxxx] Checking width is in range 0-Infinity
host.js:1 [iFrameSizer][Host page: xxxxxx] Requesting animation frame
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event lock off
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] --
host.js:1 [iFrameSizer][Host page: xxxxxx] IFrame (xxxxxx) height set to 770px
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Window resize] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected
host.js:1 [iFrameSizer][Host page: xxxxxx] [Tab Visable] Sending msg to iframe[xxxxxx] (resize) targetOrigin: https://yyyyy.xxxxxx.net
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] Trigger event: Parent window requested size check
app-f720aa844c.js:8 [iFrameSizer][xxxxxx] No change in size detected

Also tried as non global. I could send you a link, offline, if you'd like.

Answer 12 · 2016-06-13T22:21:41.000Z

Are you setting sizeWidth to true and sizeHeight to false to make it calc the width?

Also can you add a console.log to the custom sizing method so we're sure it's running.

Answer 13 · 2016-06-13T22:23:08.000Z

tried console.log, got nothing. Not setting that stuff. Should I be?

Answer 14 · 2016-06-13T22:26:01.000Z

Yep, otherwise it only calcs the height.

Answer 15 · 2016-06-13T22:32:13.000Z

hmm... perhaps that was my issue to begin with?

Answer 16 · 2016-06-13T22:38:38.000Z

this is what I;m using, still not resizing properly;

{log:true, sizeWidth:true, sizeHeight:false, widthCalcMethod: () => window.innerWidth}

Answer 17 · 2016-06-13T22:44:17.000Z

WidthCalcMethod can only be set in the iFrame. See above.

Answer 18 · 2016-06-13T22:51:05.000Z

Im a bit confused. This seemed to imply that the options needs to be set on the parent site?

Answer 19 · 2016-06-13T22:57:40.000Z

I think I get it, but - shouldnt the iframe resize based on the parent window size? Why would it do its on detection?

Answer 20 · 2016-06-13T23:03:33.000Z

It's not possible to pass a function from the parent to the iFrame via postMessge

Answer 21 · 2016-06-13T23:05:10.000Z

But why would you? Just figure out the width on the parent, and pass the width to the child? Sorry if im being dumb here, just trying to understand

Answer 22 · 2016-06-13T23:06:43.000Z

The parent window resizing triggers a message to be sent to the iFrame to ask it to work out it's new size. The iFrame then works out it's new size and sends a message back to the parent, which then update the iFrame to the new size.

Answer 23 · 2016-06-13T23:07:50.000Z

Content in the iFrame changing also triggers a size update

Answer 24 · 2016-06-13T23:08:55.000Z

I see. In that case, perhaps my approach in resolving my issue (i.e. that the iframe container has a min-width) is flawed?

Answer 25 · 2016-06-13T23:12:10.000Z

Not sure what the problem is your trying to solve is. Their is an option to set min and max sizes.

Answer 26 · 2016-06-13T23:49:12.000Z

Ive been barking up the wrong tree. Closing. Thanks for your help!