如何使用 KnockoutJS 为 iframe 绑定内容？

Question

Can anyone please tell me how to bind data to an iframe using Knockout?谁能告诉我如何使用 Knockout 将数据绑定到iframe ？ I have tried to do this as below, but it is not working as expected:我尝试按如下方式执行此操作，但它没有按预期工作：

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

And Javascript:和 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 .我想将文本“Hello Content”添加到iframe 。 Can anyone please help me on this?任何人都可以帮我解决这个问题吗？

Answer 1

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.它允许您拥有一个具有整个 html 结构的 observable，并用该数据填充 iFrame。 If you update the html, the iframe is updated with the new version:如果您更新 html，则 iframe 会更新为新版本：

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.有关演示，请参阅此 jsfiddle 。 The valueUpdate is merely there so the demo is clearer, it's debatable if that's a good idea in bigger scenarios. valueUpdate只是在那里，所以演示更清晰，如果在更大的场景中这是一个好主意，这是有争议的。

Answer 2

EDIT: Fiddle Updated.编辑：小提琴更新。

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

You need to create a custom binding handler for this.您需要为此创建一个自定义绑定处理程序。 I have used one such by http://jsfiddle.net/mbest/GYRUX/我使用过这样的一个http://jsfiddle.net/mbest/GYRUX/

and changed it to suit your needs.并对其进行了更改以满足您的需求。 Take a look at both 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);
    }
};

Answer 3

You can have the code like this, works absolutely 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>

Answer 4

thats the best code ever it worked with 2+ iframes..... cant run on chrome it has no server path unless your on a server.. but works in IE as desktop file.... 多数民众赞成在有史以来最好的代码与2 + iframes .....不能在chrome上运行，除非您在服务器上，否则它没有服务器路径。.但是在IE中作为桌面文件运行。

nice job Sujesh Arukil 干得好Sujesh Arukil

如何使用 KnockoutJS 为 iframe 绑定内容？

问题描述

3 个解决方案

解决方案1
11 2014-10-03 08:25:36

解决方案2
8 2013-03-20 13:45:22

解决方案3
0 2013-03-20 20:26:09

解决方案4
-1 2019-11-19 02:04:38

如何使用 KnockoutJS 为 iframe 绑定内容？

问题描述

3 个解决方案

解决方案1 11 2014-10-03 08:25:36

解决方案2 8 2013-03-20 13:45:22

解决方案3 0 2013-03-20 20:26:09

解决方案4 -1 2019-11-19 02:04:38

解决方案1
11 2014-10-03 08:25:36

解决方案2
8 2013-03-20 13:45:22

解决方案3
0 2013-03-20 20:26:09

解决方案4
-1 2019-11-19 02:04:38