如何使用KnockoutJS数据绑定iframe的内容?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用KnockoutJS数据绑定iframe的内容?相关的知识,希望对你有一定的参考价值。

谁能告诉我如何使用Knockout将数据绑定到iframe?我试过这样做,如下所示,但它没有按预期工作:

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

javascript

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

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

我想将文本“Hello Content”添加到iframe中。有人可以帮我这个吗?

答案

警告:这显然有安全隐患!只能使用您绝对信任的来源的代码执行此操作。

这是一个基础,直接的解决方案。它允许您拥有一个具有整个h​​tml结构的observable,并使用该数据填充iFrame。如果您更新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>
<head><title>Test</title></head>
<body>

My <em>fine</em> text.

</body>
</html>")
});

你可以在你的视图中使用这个:

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

有关演示,请参阅this jsfiddlevalueUpdate只是在那里,所以演示更清晰,如果在更大的场景中这是一个好主意,这是有争议的。

另一答案

编辑:小提琴更新。

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

您需要为此创建自定义绑定处理程序。我使用了http://jsfiddle.net/mbest/GYRUX/这样的一个

并根据您的需要进行了更改。看看两者,看看哪些适合您的需求。

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

要么

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

以上是关于如何使用KnockoutJS数据绑定iframe的内容?的主要内容,如果未能解决你的问题,请参考以下文章

如何调试 KnockoutJS 的模板绑定错误?

使用knockoutjs进行数据表数据绑定

使用 knockoutjs 绑定来自 JSON 对象的数据 - Asp.net MVC

KnockoutJS 3.X API 第四章 数据绑定 UI绑定

如何将focusOut事件绑定到knockoutjs

KnockoutJS 3.X API 第四章 数据绑定 控制流with绑定