如何使用 KnockoutJS 為 iframe 綁定內容？

Question

誰能告訴我如何使用 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 。 任何人都可以幫我解決這個問題嗎？

Answer 1

警告：這顯然有安全隱患！ 僅使用來自您絕對信任的來源的代碼執行此操作。

這是一個基本的、直接的解決方案。 它允許您擁有一個具有整個 html 結構的 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>\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>

有關演示，請參閱此 jsfiddle 。 valueUpdate只是在那里，所以演示更清晰，如果在更大的場景中這是一個好主意，這是有爭議的。

Answer 2

編輯：小提琴更新。

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

Answer 3

您可以擁有這樣的代碼，絕對可以正常工作：-

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

Answer 4

多數民眾贊成在有史以來最好的代碼與2 + iframes .....不能在chrome上運行，除非您在服務器上，否則它沒有服務器路徑。.但是在IE中作為桌面文件運行。

干得好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