How to data-bind content for an iframe using KnockoutJS?

iframe, javascript, jquery, knockout.js

Solution

Warning: this obviously has security implications! Only do this with code from sources you absolutely trust.

Here's a basic, straightforward solution to build on. It allows you to have an observable with an entire html structure, and fill the iFrame with that data. If you update the html, the iframe is updated 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 this like this in your view:

<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. The `valueUpdate` is merely there so the demo is clearer, it's debatable if that's a good idea in bigger scenarios.

Problem

Can anyone please tell me how to bind data to an `iframe` using Knockout? I have tried to do this as below, but it is not working 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" into the `iframe`. Can anyone please help me on this?

Original source