Calling functions inside an iframe

Webix JS
1

Hi all,
I currently have a view:“iframe” with internal JS functions. When this was previously in HTML, I was able to use document.getElementById(’[id]’).contentWindow.myFxn() to call an internal function myFxn(). Is there a way to do this this a Webix iframe? I can’t seem to find a way to do this.

2

Hi,

There are two methods that you can use:

3

Hi Maria,
I get the following error when I try using getWindow: “TypeError: $$(…).getWindow.loadFile is not a function”. “loadFile” is definitely a function defined in the file displayed by the iframe though.

4

Probably it must be a

$$(...).getWindow().loadFile

getWindow is a method , not a property

5

Ah thanks! It works now. Not sure how I missed that little detail

6

Er hi again, I have a related problem right now.

I’m making iframes inside a for loop and want to call an internal function on each as it’s made. It would ideally look something like this:

for(var x=0; x<numViewstoAdd; x++){
   $$('layout').addViewer({id:'myiframe'+x, view:'iframe', src:'src.html'})

   $$('myiframe'+x).getWindow().myFunction(x);
}

However, this is returning "TypeError: $$(...).getWindow(...).setGridCoordinates is not a function". I thought that this might be because the iframe was not fully loaded at the time of execution so I tried doing this in an 'onAfterLoad' event function, but that returned $$(...) is undefined...
7

You are correct, code need to use onAfterLoad event.

Try to use a code like the next

for(var x=0; x<numViewstoAdd; x++){
   $$('layout').addView({id:'myiframe'+x, view:'iframe', src:'src.html', on:{
      onAfterLoad:function(){
              this.getWindow().myFunction(x);
      }
   }})
}

Inside of event handlers, this points to the view ( iframe view in your case)

8

Ah, yes. I actually tried that earlier. It kind of works. The problem is that my code is sensitive to the value of x, the index of the for loop, which is at the upper bound by the time these onAfterLoad’s execute.

Is there a way to do this without having to store the loop index values and id’s in a matrix? As a workaround, I tried using the view ID’s since each one incorporates the index value, but this.id was undefined.

9

That is a common js problem, not related to the Webix components, can be solved line next for example

function load_callback(x){
     return function(){
              this.getWindow().myFunction(x);
     }
}

for(var x=0; x<numViewstoAdd; x++){
   $$('layout').addView({id:'myiframe'+x, view:'iframe', src:'src.html', on:{
      onAfterLoad:load_callback(x)
   }})
}
10

Thanks, that did it. Callback functions are still a little new to me.