1
私はWebアプリケーションを使用しています。私はKnockout.jsをクライアント側で使用しています。Iframeの追加時にKnockout.jsデータバインドが機能しません
iframeを追加するまでは問題ありません。 iframeのdata-bindは問題ありませんが、外側は機能しなくなります。私はボタンをクリックしたり、外側のページで何かをすることはできません。
これは私のホームページです：
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="knockout-3.4.2.js"></script>
<script src="script.js"></script>
</head>
<body>
username:
<input data-bind="value: name" />
<br /> age:
<input type="text" data-bind="value: age" />
<button data-bind="click: increase">Increase</button>
<br />
<button onclick="show()">show</button>
<script>
var show = function() {
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + '<div><iframe src="iframe.html" width="300" height="300"></iframe></div>';
}
</script>
</body>
</html>
そして、これはそのモデルである：
$(document).ready(function() {
function Outer(){
var self = this;
self.name = ko.observable("thomas");
self.age = ko.observable(15);
self.increase = function(){
self.age(self.age() + 1);
}
}
ko.applyBindings(new Outer());
});
右が私はage価値を高めるために増加ボタンをクリックすることができます。しかし、の表示をクリックすると、iframeと表示され、外側のページのデータは消えます。
これはiframeであり、そのモデル：
$(document).ready(function() {
function Inner(){
var self = this;
self.message = ko.observable("");
self.text = ko.observable("begin");
self.postData = function() {
if (self.message().trim() !== '') {
self.text(self.text() + "\n" + self.message())
}
self.message('');
}
}
ko.applyBindings(new Inner());
});
コードを調べて、ブラウザのJS開発ツールを使用して試してみましたか？ – jdv