0

iframeのプロパティとコンテンツを取得して表示できるようにする方法はありますか？

例： iframeにリッチテキストエディター<b>Rich Text Editor</b>として入力すると、ページの一部に表示されます。

リッチテキストエディタ==<b>Rich Text Editor</b>

前もって感謝します。

<html>
<head>
   <title>Rich Text Editor</title>
</head>

<script type="text/javascript">
function def()
{
    document.getElementById("textEditor").contentWindow.document.designMode="on";
    textEditor.document.open();
    textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
    textEditor.document.close();
    document.getElementById("fonts").selectedIndex=0;
    document.getElementById("size").selectedIndex=1;
    document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
    document.getElementById("textEditor").contentWindow.document.execCommand(x,"",y);
    textEditor.focus();
}
</script>

<body onLoad="def()">
    <center>
        <div style="width:500px; text-align:left; margin-bottom:10px ">
            <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
            <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
            <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
            <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
            <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
            <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
            <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
                <option value="Arial">Arial</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
                <option value="Courier New">Courier New</option>
                <option value="Monotype Corsiva">Monotype</option>
                <option value="Tahoma">Tahoma</option>
                <option value="Times">Times</option>
            </select>
            <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
                <option value="black">-</option>
                <option style="color:red;" value="red">-</option>
                <option style="color:blue;" value="blue">-</option>
                <option style="color:green;" value="green">-</option>
                <option style="color:pink;" value="pink">-</option>
            </select> | 
            <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
            <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
            <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" />
            <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" />
        </div>
        <iframe id="textEditor" style="width:500px; height:170px;">
        </iframe>
    </center>

</body>

4

2 に答える 2

1

このjavascriptコードをheadセクションに追加します

function showHTML () {
document.getElementById('textpad').textContent = textEditor.document.body.innerHTML;
return;
}

これらをonloadjavaスクリプト関数に含めます

 textEditor.document.addEventListener('keyup', showHTML, false);
 textEditor.document.addEventListener('paste', showHTML, false);

最後にこれをhtmlコードに追加します

<textarea id="textpad" style="width:500px;height:200px;display:block;"></textarea>

完全な例については、jsFiddleを参照してください

于 2012-12-26T18:36:08.113 に答える
0 
window.frames

親ウィンドウ内の iframe を含むすべてのフレームの配列を返します。あなたの例では、このようなことができます。

上記のコマンドを使用して iframe にアクセスし、iframe 内の ID で必要なデータを取得してフェッチします。あれは、

<iframe id="textEditor" style="width:500px; height:170px;">
  <div id = "testText"><b>Rich Text Editor</b></div>
</iframe>

data = window.frames[1].$('testText').innerHTML
于 2012-12-18T10:45:57.930 に答える