1

I have a problem with a jquery custom scrollbar. My document is made of different iframes. In particular, there're two: one containing a Table Of Contents (toc_iframe) and another one showing the content of the topic selected in the TOC (main_iframe). The toc_iframe is using a jquery custom scrollbar, applied to an element with id "#content", and I'm trying to get a reference to the scrollbar from the main_iframe in order to call a function of its api.

To do so, I'm using the jquery selector:

$("#content",parent.window.frames[0].document)

The selector works fine (tested with console.log), but when I call a function of the scrollbar on it, I get the classic error "Uncaught TypeError: undefined is not a function". 

$("#content",parent.window.frames[0].document).mCustomScrollbar("scrollTo",myElt);

Anyone knows what I'm doing wrong? Thanks.

miks87
  • 193
  • 1
  • 5
  • 16
  • Which iframe is the custom scrollbar plugin loaded in? You're trying to call the function in the main iframe, so the plugin has to be loaded there. – Barmar Oct 26 '14 at 21:44
  • You can't call functions directly in other iframes. If you want to communicate between iframes, see http://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site – Barmar Oct 26 '14 at 21:45
  • The scrollbar plugin is in the toc_iframe. Basically I have my main.html with the two iframes: toc_iframe and main_iframe. The two iframes load two html files which are in the same directory of main.html – miks87 Oct 26 '14 at 22:28
  • Each frame is effectively in its own process. You can't call a function loaded in one frame from another, even though you can reference the DOM elements across frames (when they're in the same domain). You need to send a message to the `toc_iframe` telling it what to do, and run a message handler there to respond to it. – Barmar Oct 26 '14 at 22:29
  • @Barmar I disagree. I've called functions from other iframes before, or at least set variables in them. I'll try to get a working example – markasoftware Oct 26 '14 at 22:44
  • @Barmar Got it working. Here's content of three files you need: main.html: http://pastebin.com/CVPeztcd frame1.html: http://pastebin.com/4DXMfpSs frame2.html: http://pastebin.com/hLT1HJ42 make sure to name the files properly, and you have to have them on a local server, otherwise there'll be a cross-origin error since origins don't work well with local files not being on a server. Then go to the main.html page in browser and wait a few seconds – markasoftware Oct 26 '14 at 23:05
  • @Markasoftware thanks man, it does work! Still having some issue with my scrollbar but I'll figure those out :) Cheers! – miks87 Oct 26 '14 at 23:55
  • @Markasoftware Interesting. To extend that to jQuery, it looks like you'd need to do `parent.window.frames[0].jQuery('#content').mCustomScrollbar(...)`, so that you'll run jQuery in the other frame. – Barmar Oct 27 '14 at 00:06
  • @Barmar yeah, but it might be nicer to do `parent.frames[0].someFunctionName=function(){/*content here*/}` and then run `parent.frames[0].someFunctionName()`, but I'm not sure how that'd work with scoping and stuff – markasoftware Oct 27 '14 at 00:21
  • He's trying to run functions that were already defined in the other frame, because that's where jQuery and the plugin were loaded. So he doesn't need to do that. – Barmar Oct 27 '14 at 00:29

0 Answers0