如何使用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数据绑定内容？

回答

相关问题