如何使用KnockoutJS爲iframe數據綁定內容？

任何人都可以請告訴我如何使用Knockout綁定數據到iframe？我曾嘗試如下做到這一點，但它不是按預期工作：如何使用KnockoutJS爲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內容」添加到iframe。任何人都可以幫助我嗎？

來源

2013-03-20 Meena A

編輯：小提琴更新。

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

來源

2013-03-20 13:45:22

'initChildFrame'沒有被定義爲敲除的一部分。 – 2013-04-19 01:14:07

它位於try catch塊中。 initChildFrame不是一個淘汰賽的方法。這是一個支持它的瀏覽器方法。最簡單的方法來檢查我正在處理哪個瀏覽器，以便我的bindingHandler可以工作相同。那就是爲什麼第二次檢查是否定義了iframeInit。 – 2013-04-19 02:23:01

嘿，謝謝澄清 – 2013-04-19 03:34:47

你可以有這樣的代碼，做工精絕： -

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

來源

2013-03-20 20:26:09 Shubh

這裏有一個稍微不同的（更基本的）解決方案的基礎上。它允許你有一個完整的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只是在那裏，所以演示更清晰，如果在更大的場景中這是一個好主意，這是值得商榷的。

來源

2014-10-03 08:25:36 Jeroen

簡短，甜美和完美。 – 2015-07-13 05:26:56

如何使用KnockoutJS爲iframe數據綁定內容？

回答

相關問題