Looker Connect Training

Help Center

Documentation

Community

Cloud Certifications

Question

Dynamic Iframe height and IE

  • 7 March 2018
  • 3 replies
  • 214 views
S

I am working in changing the iframe height based on the page:properties:changed event. This work great in FF and chrome but not IE 11. The ordering on the page:properties:changed event is backwards for IE with the first look height as the last event to fire on the iframe load.

FF:

data height = 100

data height = 500

IE

data height = 500

data height = 100


Anyone else having this issue? or any recommendation to resolve this issue is welcomed.

3 replies

sam
Rank
Userlevel 5
Badge

Hey @sdurrant - I wanted to let you know that I’ve been able to reproduce that behavior with IE11.


I’m not sure at this time whether it’s something Looker has control over or whether it’s just how IE11 grabs the properties. I’ll see if I can get further clarification on that from our team.


I’m curious about the use case here - is it that you have a script which is expecting a certain order? I was thinking for a workaround, you might be able to account for this reversal in your script, if your script can tell what browser it’s being run in.

S

@sam - To answer your question, yes we have a script that used to update the iframe height based on the ‘page:properties:changed’ event. This is based on the iframe interactivity block from looker.


I don’t think there is an order per say as we update the the iframe height every time this event is triggered


example:



window.addEventListener(“message”, function(event) {

if (event.source === jQuery(’#looker’)[0].contentWindow) { // confirm message came from Looker

var lookerIframe = jQuery(’#looker’)[0];

var data = JSON.parse(event.data)

if(data.type == ‘page:properties:changed’) {

lookerIframe.style.height = (data.height > 800 ? data.height : ‘800’) + ‘px’;

console.log(data);

}

}

});


sam
Rank
Userlevel 5
Badge

Thanks for the clarification @sdurrant. While I investigate whether this is something Looker has control over, I’ve got another idea for a workaround.


In the script here, I notice the lookerIframe.style.height is being set to data.height (as long as it’s greater than 800). What if, instead of relying on data.height to be correct, the script instead checked for the height of the iframe on the page? That way, the page:properties:changed event can still be useful as a way to say when the height changes, but then you can be sure that the height is right regardless of browser.

Reply


Terms of Service