Mee*_*a A 8 javascript iframe jquery knockout.js
谁能告诉我如何将数据绑定到iframe使用Knockout？我试过这样做,如下所示,但它没有按预期工作:
<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.有人可以帮我这个吗？
Jer*_*oen 10
警告:这显然有安全隐患!只能使用您绝对信任的来源的代码执行此操作.
这是一个基础,直接的解决方案.它允许您拥有一个具有整个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仅仅有这么演示更加清晰,这是值得商榷的,如果这是在大场景是一个好主意.
编辑:小提琴更新.
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);
}
};
| 归档时间： |
|
| 查看次数： |
8540 次 |
| 最近记录： |