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

lhcgjxsq 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(155)

有人能告诉我如何使用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!!"));

我想在iframe中添加文本“Hello Content”。有人能帮我吗？

knockout.js

来源：https://stackoverflow.com/questions/15523457/how-to-data-bind-content-for-an-iframe-using-knockoutjs

3条答案

按热度按时间

eivnm1vs1#

**警告：**这显然有安全隐患！请仅对来自您绝对信任的源的代码执行此操作。

这里有一个简单的解决方案，它允许你用一个完整的html结构来观察，并用这个数据填充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>\n<head><title>Test</title></head>\n<body>\n\nMy <em>fine</em> text.\n\n</body>\n</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 jsfiddle的演示。valueUpdate只是为了让演示更清晰，在更大的场景中这是否是一个好主意是有争议的。

赞(0）回复(0）举报 2022-11-10

xyhw6mcr2#

编辑：Fiddle已更新。
http://jsfiddle.net/sujesharukil/NnT78/10/
您需要为此创建一个自定义绑定处理程序。
并且改变了它以适应你的需要。两个都看一看，看看什么适合你的需要。

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

赞(0）回复(0）举报 2022-11-10

bvjxkvbb3#

你可以有这样的代码，工作绝对罚款：-

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

赞(0）回复(0）举报 2022-11-10

我来回答

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

3条答案

相关问题

热门标签

最新问答