Geek Answers Handbook

How to associate data with content for iframes using KnockoutJS?

Can anyone tell me how to bind data to an iframe using Knockout? I tried to do this as shown below, but it does not work as expected:

 <iframe data-bind ="attr: { src: testcontent}"></iframe>

And Javascript:

 var ViewModel = function (content) { this.testcontent = ko.observable(content); }; ko.applyBindings(new ViewModel("Hello World!!"));

I want to add the text "Hello Content" in the iframe . Can someone help me with this?

+8
source share
3 answers

Warning: this obviously matters for security! Do this only with code from sources that you absolutely trust.

Here's a basic, simple solution you can build on. This allows you to have an observable whole html structure and populate the iFrame with this data. If you update the HTML, the iframe will update with the new version:

 ko.bindingHandlers.iframeContent = { update: function(element, valueAccessor) { var value = ko.unwrap(valueAccessor()); element.contentWindow.document.close(); // Clear the content element.contentWindow.document.write(value); } }; ko.applyBindings({ myHtml: ko.observable("<html>\n<head><title>Test</title></head>\n<body>\n\nMy <em>fine</em> text.\n\n</body>\n</html>") });

You can use it as follows:

 <p>Edit your html:</p> <textarea data-bind="value: myHtml, valueUpdate: 'afterkeydown'"></textarea> <p>And see it appear in an iframe:</p> <iframe data-bind="iframeContent: myHtml"></iframe>

See this jsfiddle for a demo. valueUpdate simply present, so the demo is more than valueUpdate , it is controversial if it is a good idea in large scripts.

+10
source

EDIT: Fiddle Updated.

http://jsfiddle.net/sujesharukil/NnT78/10/

To do this, you need to create a special binding handler. I used one such http://jsfiddle.net/mbest/GYRUX/

and changed it according to your needs. Take a look at them and see what works for your needs.

 ko.bindingHandlers.bindIframe = { init: function(element, valueAccessor) { function bindIframe() { try { var iframeInit = element.contentWindow.initChildFrame, iframedoc = element.contentDocument.body; } catch(e) { // ignored } if (iframeInit) iframeInit(ko, valueAccessor()); else if (iframedoc){ var span = document.createElement('span'); span.setAttribute('data-bind', 'text: someProperty'); iframedoc.appendChild(span); ko.applyBindings(valueAccessor(), iframedoc); } }; bindIframe(); ko.utils.registerEventHandler(element, 'load', bindIframe); } };
+8
source

You may have code that works just fine: -

 // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.externalUrl = ko.observable("http://www.w3schools.com"); } // Activates knockout.js ko.applyBindings(new AppViewModel());

OR

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test IFrame</title> <script src="Scripts/jquery-1.7.1.js"></script> <script src="Scripts/knockout-2.2.1.js"></script> <script> $(document).ready(function () { // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.externalUrl = "http://www.w3schools.com"; } // Activates knockout.js ko.applyBindings(new AppViewModel()); }); </script> </head> <body> <iframe class="iframe" id="iframe" style="width: 700px; height: 700px" data-bind="attr: { src: externalUrl }"></iframe> </body> </html>
0
source

More articles:


All Articles