use window.innerWidth to calcualte width

[mbrevda]

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?

[davidjbradshaw]

Interesting idea.

[davidjbradshaw]

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

[mbrevda]

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?

[davidjbradshaw]

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.

[mbrevda]

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
.

[davidjbradshaw]

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.

[mbrevda]

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
.

[davidjbradshaw]

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...

[mbrevda]

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

[davidjbradshaw]

Could post the log output?

[mbrevda]

[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.

[davidjbradshaw]

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.

[mbrevda]

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