獲取iframe屬性和內容

有沒有辦法獲得iframe屬性和內容並能夠顯示它？獲取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>

來源

2012-12-18 jamie

對不起，我不打消你的問題。「iframe」屬性是什麼意思？ HTML屬性？請舉例說明您提供的代碼中清晰可見的財產。另外，你想在哪裏以及如何顯示「iframe」的內容？ – jfrej

@zeroSeven另請參閱此處：http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977#11107977 – algorhythm

的頭部分添加這段JavaScript代碼

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

包括這些上的onload Java腳本函數

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

最後的HTML代碼添加此

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

for full exampl e，請參閱jsFiddle

來源

2012-12-26 18:36:08 jamie

window.frames

將返回所有包括你的父窗口內的I幀幀的數組。在你的例子中，你可以做這樣的事情。

訪問您的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-18 10:45:57 LPD

獲取iframe屬性和內容

回答

相關問題