Javascript 如何使用KnockoutJS为iframe数据绑定内容？_Javascript_Jquery_Iframe_Knockout.js

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

javascript jquery iframe knockout.js

Javascript 如何使用KnockoutJS为iframe数据绑定内容？,javascript,jquery,iframe,knockout.js,Javascript,Jquery,Iframe,Knockout.js,谁能告诉我如何使用Knockout将数据绑定到iframe？我已尝试按以下方式执行此操作，但未按预期工作：和Javascript： var ViewModel = function (content) { this.testcontent = ko.observable(content); }; ko.applyBindings(new ViewModel("Hello World!!")); 我想将文本“Hello Content”添加到iframe中。有人能帮我吗？编辑：

谁能告诉我如何使用Knockout将数据绑定到

iframe

？我已尝试按以下方式执行此操作，但未按预期工作：

和Javascript：

var ViewModel = function (content) {
     this.testcontent = ko.observable(content);
};

ko.applyBindings(new ViewModel("Hello World!!"));

我想将文本“Hello Content”添加到

iframe

中。有人能帮我吗？

编辑：小提琴更新

您需要为此创建自定义绑定处理程序。我曾经用过这样的一个

并根据您的需要进行了更改。看看这两者，看看什么适合你的需要

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

您可以使用这样的代码，工作非常好：-

// 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());

或


测试框架
$（文档）.ready（函数（）{
//这是一个简单的*viewmodel*-JavaScript，用于定义用户界面的数据和行为
函数AppViewModel（）{
this.externalUrl=”http://www.w3schools.com";
}
//激活knockout.js
应用绑定（新的AppViewModel（））；
});

警告：这显然有安全隐患！只有使用您绝对信任的源代码才能做到这一点

这里有一个基本的、简单的解决方案。它允许您使用整个html结构创建一个可观察的对象，并用该数据填充iFrame。如果更新html，iframe将使用新版本更新：

ko.bindingHandlers.iframeContent={
更新：函数（元素、值访问器）{
var value=ko.unwrap（valueAccessor（））；
element.contentWindow.document.close（）；//清除内容
元素.contentWindow.document.write（值）；
}
};
ko.applyBindings({
myHtml:ko.observable（“\n测试\n\n\n我的精细文本。\n\n\n”）
});

您可以在视图中这样使用：

编辑您的html：
并将其显示在iframe中：

请参见演示。

valueUpdate

只是为了让演示更清晰，在更大的场景中这是否是一个好主意是有争议的。

initChildFrame

没有被定义为淘汰的一部分。它在try-catch块中。initChildFrame不是淘汰方法。它是一种支持它的浏览器方法。检查我正在处理的浏览器的最简单方法，以便我的bindingHandler可以同样工作。这就是为什么第二次检查iframeInit是否被定义的原因。当我在最新的Chrome（31.0.1650.57 m版本）中使用您的第一个JSFIDLE链接进行测试时，它似乎没有做任何事情。这是镀铬的吗？更改其中一个文本框不会更改另一个。我已更新了小提琴。外部资源中加载的淘汰版本来自github项目。我已经用cdnjs.com版本更新了它。简短，甜美，完美。

<!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>