如何使用KnockoutJS数据绑定iframe的内容？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用KnockoutJS数据绑定iframe的内容？相关的知识，希望对你有一定的参考价值。
谁能告诉我如何使用Knockout将数据绑定到iframe？我试过这样做，如下所示，但它没有按预期工作：
<iframe data-bind ="attr: { src: testcontent}"></iframe>
var ViewModel = function (content) {
this.testcontent = ko.observable(content);
};
ko.applyBindings(new ViewModel("Hello World!!"));
我想将文本“Hello Content”添加到iframe中。有人可以帮我这个吗？
答案
警告：这显然有安全隐患！只能使用您绝对信任的来源的代码执行此操作。
这是一个基础，直接的解决方案。它允许您拥有一个具有整个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>
<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 jsfiddle。 valueUpdate只是在那里，所以演示更清晰，如果在更大的场景中这是一个好主意，这是有争议的。
另一答案
编辑：小提琴更新。
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的内容？的主要内容，如果未能解决你的问题，请参考以下文章
在 Knockout js 中动态 URL 绑定到 iframe
使用 knockoutjs 绑定来自 JSON 对象的数据 - Asp.net MVC