I want to make a view for html document inside an iframe. For something like:
<div id="some">
<iframe id="other" />
</div>
I want to dynamically load an html document received from server into this iframe. The problem is, that I want to use Backbone View for that document. If I do something like this:
var projectView = Backbone.View.extend(
{
tagName: 'html',
initialize: function()
{
this.model.bind('sync', this.render, this);
},
render: function()
{
this.$el.html(this.model.get('content')); // content is from model, and it
//receives the html document from server
return this;
}
});
Then, when I do:
var iframe = $('#other')[0].contentWindow.document;
iframeDocument.open();
iframeDocument.write(projectView.render().el);
iframeDocument.close();
It does not work. I tryed a lot of different binations but no success. If I use document.write() with static html it works fine but how to do with backbone view and dynamic content?
I want to make a view for html document inside an iframe. For something like:
<div id="some">
<iframe id="other" />
</div>
I want to dynamically load an html document received from server into this iframe. The problem is, that I want to use Backbone View for that document. If I do something like this:
var projectView = Backbone.View.extend(
{
tagName: 'html',
initialize: function()
{
this.model.bind('sync', this.render, this);
},
render: function()
{
this.$el.html(this.model.get('content')); // content is from model, and it
//receives the html document from server
return this;
}
});
Then, when I do:
var iframe = $('#other')[0].contentWindow.document;
iframeDocument.open();
iframeDocument.write(projectView.render().el);
iframeDocument.close();
It does not work. I tryed a lot of different binations but no success. If I use document.write() with static html it works fine but how to do with backbone view and dynamic content?
Share Improve this question asked Jul 22, 2013 at 21:44 shadoxshadox 3,8495 gold badges32 silver badges45 bronze badges 2-
What is the value of
projectView.render().eljust beforewritegets called? – McGarnagle Commented Jul 22, 2013 at 21:50 - Well, it's a JavaScript Object: [object HTMLIFrameElement]. If I put the content in a div, it is pletely normal html document. Doesn't work for iframe though. In the browser console it seems to be html document. – shadox Commented Jul 22, 2013 at 22:07
3 Answers
Reset to default 4The "el" property is a reference to an HTML object. You're passing it into a document.write() call when that function is actually expecting an HTML string. Which is why static HTML works for you.
So you'd probably want to do something like this:
iframeDocument.open();
iframeDocument.write(projectView.render().el.innerHTML);
iframeDocument.close();
I think your approach is unnecessarily plex and using backbone isn't buying you anything useful. Why don't you just set the iframes src attribute with the model's content URL and be done with it?
render: function()
{
this.$el.attr('src', this.model.url()); //Or whatever you need to get the right URL
return this;
}
There is no reason to use an iframe.
You can just replace the iframe with a div and it will render every time your sync event is triggered.
You can also use on instead of bind for the event.
var projectView = Backbone.View.extend(
{
tagName: 'div',
initialize: function()
{
this.model.on('sync', this.render, this);
},
render: function()
{
this.$el.html(this.model.get('content')); // content is from model, and it
//receives the html document from server
return this;
}
});
and then just put the view into a container
$('#some').html(projectView.el);
you may have to remove some unnecessary content(ie. <head> tags) from the model whenever it syncs