0

動的に作成された入力 (またはテキスト ボックス) の値を iframe に送信し、iframe 内で HTML として表示するにはどうすればよいですか?

私は以下のコード（JSFiddle上）でそれをやろうとしていますが、他の解決策もいいでしょう。ありがとう。Jqueryでも大丈夫です。

HTMLは次のとおりです。

<a href="#" id="new" rel="create">new</a><br>
<a href="#" id="another" rel="create">another</a><br>

<input id="thisButton" type="button" name="Display" value="Edit HTML Below then Click to Display"/>

<iframe id="iframetest" src="" style="background: White;"></iframe>

Javascript は次のとおりです。

var counter = {};

var myHTML = {
    'new': '<input id="test%n" name="test" value="<b>blah</b> blah blah %n">',
    'another': '<input id="another%n" name="test" value="<b>cool</b> COOL! %n">'
};

var htmlForId = {
    'foo': ['a','b','c'],
    'bar': ['d','e','f']
}

var createEls = document.querySelectorAll('a[rel=create]');
for(var i = 0; i < createEls.length; i++) {

  createEls[i].onclick = create;
}

function create() {
    var id = this.id;

    var div = document.createElement('div');
    div.className = 'create';
    if (counter[id]===undefined) { counter[id] = 1; }
    var thecurrentid = counter[id];
    div.id = id + counter[id]++;

    if (div.id in myHTML) {
        div.innerHTML = myHTML[div.id].replace(/%n/g, thecurrentid);
    } else if (this.id in myHTML) {
        div.innerHTML = myHTML[this.id].replace(/%n/g, thecurrentid);
    } else {
        div.innerHTML = div.id;
    }
    document.body.appendChild(div);

    return false;
}

var myArray = [
    'b<strong>l</strong>a bla bla', // index 0
    'foo', // index 1
    'test' // index 2
];
function appendArray(a) {
    for(var i = 0; i < a.length; i++) {
        var div = document.createElement('div');
        div.className = 'loop';
        div.innerHTML = a[i];
        document.body.appendChild(div);
    }
}

jsfiddle: http://jsfiddle.net/bBf9j/8/

コメント付きの jsfiddle (必要な場合): http://jsfiddle.net/bBf9j/7/

4

1 に答える 1

0

contentDocument を使用して iframe のドキュメント オブジェクトにアクセスできます。

document.getElementById("thisButton").onclick = function(){
    var html = "<b>Dynamic Content</b>"; //TODO: get the value dynamically from textbox
    document.getElementById("iframetest").contentDocument.body.innerHTML = html;
};
于 2013-10-23T03:09:59.960 に答える