Using iframe body as region in magic
I am trying to use the body of an iframe as an area in a puppet layout. Marionette uses standard jquery selectors to determine which element is scoped, for example:
App.addRegions( { main: "#main-region" } );
I want my area to be the body of an iframe, which would normally be like this:
$('iframe').contents().find('body');
When trying to put above as scope, for example:
App.addRegions( { main: $('iframe').contents().find('body') } );
The following error is thrown:
Uncaught Error: Syntax error, unrecognized expression: iframe.contents() body
Sizzle.error jquery.js?body=1:4681
tokenize jquery.js?body=1:4742
select jquery.js?body=1:5114
I tried to set the selector directly:
App.addRegions( { main: "iframe.contents() body" } );
But this gives me the same error.
EDIT:
Also tried to create a psuedo selector for it:
$.expr[":"].contents = $.expr.createPseudo(function(selector) {
return function(el) {
var $el;
$el = $(el);
console.log($el.contents().find(selector));
return $($el.contents().find(selector));
};
});
// Usage: $('iframe:contents body');
Which writes the body of the iframe in the function itself:
[body, prevObject: jQuery.fn.jQuery.init[1], context: iframe, selector: ".contents() body", constructor: function, init: function…]
But it ultimately returns the iframe element:
[iframe, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "iframe:contents(body)", constructor: function, init: function…]
So what I need is a selector that can get the body of an iframe or something else that can work with Marionette.
Is there a way to do this?
source to share
Not sure if you found the answer to this solution, but you can make it work quite easily by creating the region yourself, instead of relying on the built-in behavior of the Marionette selector:
1) First you need to create a new one Region
and pass the DOM element as a parameter el
:
var iframeRegion = new Backbone.Marionette.Region({
// Make sure you get the DOM object out of the jQuery object (eg. the .get() call)
el: $('iframe').contents().find('body').get(0)
});
2) Then added an instance to your application instead of using the select string:
App.addRegions({
main: iframeRegion
});
source to share