How do you use jQuery to access an instance inside an iframe from the container document?
I'm rendering a Summernote widget inside an iframe, and it works well, but I need to add some logic to enable and disable it from the parent document.
Without the iframe, doing this is as simple as:
$('#mysummernoteid').summernote('disable')
$('#mysummernoteid').summernote('enable')
However, now that it's inside an iframe, I'm no longer able to access the .summernote() method.
I thought you could access iframe contents with jQuery via:
$('#iframeid').contents().find('#mysummernoteid')
and that does indeed retrieve the correct <div> I'm using for summernote in my iframe. However, if I then try to access .summernote() my browser gives me the error:
.summernote is not a function
What's even more odd is that if I inspect the object returned by $('#iframeid').contents().find('#mysummernoteid') in the browser console, I can see the summernote instance registered at jQuery331057949734821731762/summernote in the object tree.
What's going on here? Why isn't jQuery able to access instances bound to objects in an iframe, even though the console can see them, and how do I fix it?