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?

+3


source to share


1 answer


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
});

      

0


source







All Articles