obtenir la propriété et le contenu iframe

Y at-il un moyen d'obtenir les propriétés iFrame et le contenu et pouvoir l'afficher?obtenir la propriété et le contenu iframe

exemple: taper comme éditeur de texte enrichi sur le iframe et il sera affiché comme <b>Rich Text Editor</b> sur une partie de la page.

Rich Text Editor de == <b>Rich Text Editor</b>

merci à l'avance.

<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>

Source

2012-12-18 jamie

Désolé, je n'undestand pas votre question. Que voulez-vous dire par les propriétés 'iframe'? Attributs HTML? Veuillez donner un exemple d'une propriété qui serait clairement visible dans le code que vous avez fourni. De plus, où et comment voulez-vous afficher le contenu de 'iframe'? – jfrej

@zeroSeven voir aussi ici: http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977#11107977 – algorhythm

ajouter ce code javascript sur la section de la tête

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

comprennent ceux-ci sur la fonction java script onload

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

dernier ajouter ceci sur le code html

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

pour exampl complète e, voir jsFiddle

Source

2012-12-26 18:36:08 jamie

window.frames

vous ramènera un tableau de tous les cadres, y compris les iframes dans la fenêtre de votre parent. Dans votre exemple, vous pouvez faire quelque chose comme ça.

Accédez à votre iframe en utilisant la commande ci-dessus et récupérez les données que vous voulez dans un id à l'intérieur d'iframe et récupérez-la. C'est,

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

data = window.frames[1].$('testText').innerHTML

Source

2012-12-18 10:45:57 LPD

obtenir la propriété et le contenu iframe

Répondre

Questions connexes