NO.150 ドキュメント応用⑩

ブラウザ内ブラウザ

フレーム内に関して様々な処理をします。
インラインフレーム内に全部のコンテンツを詰めて、後は親ウィンドウから操作する手法・・
結構自分の中ではよく使うやり方です。
実行例

ソース
<style type=text/css>
<!--
button,iframe{border:silver solid 1px;background-color:black;}
button{width:50px;height:50px;color:lime;}
-->
</style>
<script type=text/javascript>
<!--
function loc(){
dead = window.open("","_blank","width=500,height=200,scrollbars=yes");
dead.moveTo(screen.width/2-250,screen.height/2-100);
dead.document.write("<title>",f1.document.title,"のlocation情報","</title>");
dead.document.write("<body ","bgcolor=black ","text=silver>");
dead.document.write("<input type=button value=close ","onClick='window.close();'><br>");
dead.document.write("<style type=text/css>body{font-size:15px;}</style>");
dead.document.write("pathname = ",f1.location.pathname,"<BR>");
dead.document.write("host = ",f1.location.host,"<BR>");
dead.document.write("hostname = ",f1.location.hostname,"<BR>");
dead.document.write("port = ",f1.location.port,"<BR>");
dead.document.write("protocol = ",f1.location.protocol,"<BR>");
}
function imgs(){
im = window.open("","_blank","width=400,height=400,scrollbars=yes");
im.moveTo(screen.width/2-200,screen.height/2-200);
im.document.write("<title>『",f1.document.title,"』の画像","</title>");
im.document.write("<body ","bgcolor=black ","text=silver><style>body,td{font-size:15px;}img{width:350;height:200;}</style>");
im.document.write("<input type=button value=close ","onClick='window.close();'><br>","<center>");
im.document.write("『"+f1.document.title,"』ページ内画像詳細","<br><br>");
for(i=0;i<f1.document.images.length;i++){
im.document.write("<input type=button ","value=back ","onClick='window.opener.f1.history.back()'>");
im.document.write("<input type=button ","value=next ","onClick='window.opener.f1.history.forward()'>","<BR>");
im.document.write("<table ","border=1 ","bgcolor=darkblue ","width=90%>");
im.document.write("<tr><td>","<img src=",f1.document.images[i].src,"></td></tr>");
im.document.write("<tr><td>","url = ",
"<a href=",f1.document.images[i].src," target=f1>",f1.document.images[i].src,"</a></td></tr>");
im.document.write("<tr><td>","name = ",f1.document.images[i].name,"</td></tr>");
im.document.write("<tr><td>","size = ",f1.document.images[i].width,"×",
f1.document.images[i].height,"</td></tr>");
im.document.write("</table>","<BR><br>");
}
}
function lks(){
im = window.open("","_blank","width=400,height=400,scrollbars=yes");
im.moveTo(screen.width/2-200,screen.height/2-200);
im.document.write("<title>","Link's Information","</title>");
im.document.write("<body ","bgcolor=black ","text=silver"," link=darkblue>");
im.document.write("<input type=button value=close ","onClick='window.close();'><br>","<center>");
im.document.write("『",f1.document.title,"』のページ内のリンク詳細","<br><br>");
for(i=0;i<f1.document.links.length;i++){
im.document.write("<input type=button ","value=back ","onClick='window.opener.f1.history.back()'>");
im.document.write("<input type=button ","value=next ","onClick='window.opener.f1.history.forward()'>","<BR>");
im.document.write("<table ","border=1 ","bgcolor=darkblue ","width=90%>");
im.document.write("<tr><td>","<font color=lightblue><b>","Link NO.",i+1,"</b></font></td></tr>");
im.document.write("<tr><td>","url = ","<a href=",f1.document.links[i].pathname," target=f1>",f1.document.links[i].pathname,"</a></td></tr>");
im.document.write("<tr><td>","host = ",f1.document.links[i].host,"</td></tr>");
im.document.write("<tr><td>","hostname = ",f1.document.links[i].hostname,"</td></tr>");
im.document.write("<tr><td>","port = ",f1.document.links[i].port,"</td></tr>");
im.document.write("<tr><td>","protocol = ",f1.document.links[i].protocol,"</td></tr>");
im.document.write("</table>","<BR><br>");
}
}
function pro(){
dead = window.open("","_blank","width=500,height=500,scrollbars=yes");
dead.moveTo(screen.width/2-250,screen.height/2-250);
dead.document.write("<title>",f1.document.title,"のプロパティ","</title>");
dead.document.write("<body ","bgcolor=black ","text=silver>");
dead.document.write("<input type=button value=close ","onClick='window.close();'><br>");
dead.document.write("<style type=text/css>body{font-size:15px;}</style>");
dead.document.write("<table border=1>");
for(a in f1.document){
dead.document.write("<tr><td>"+a+"</td><td>"+document[a]+"</td></tr>");
}
dead.document.write("</table>");
}
-->
</script>
<form name=fr>
<button onClick="f1.history.back();"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">back</button>
<button onClick="f1.history.forward();"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">forward</button>
<button onClick="f1.location.reload();"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">reload</button>
<button onClick="f1.location.href='index.html';"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">home</button>
<button onClick="f1.location.href='view-source:'+f1.location;"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">source</button>
<button onClick="loc()"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">locations</button>
<button onClick="imgs()"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">images</button>
<button onClick="lks()"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">links</button>
<button onClick="pro()"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">properties</button>
<button onClick="window.open(f1.location)"onMouseover="this.style.backgroundColor='white';"
onMouseout="this.style.backgroundColor='black';">new win</button>
color:<select name=sl onChange=js2()>
<option></option>
<option value=darkred></option>
<option value=red></option>
<option value=orange></option>
<option value=yellow></option>
<option value=lime></option>
<option value=green></option>
<option value=blue></option>
<option value=darkblue></option>
<option value=purple></option>
<option value=silver></option>
</select>
</form>
<script type=text/javascript>
<!--
for(a=0;a<document.fr.sl.options.length;a++){
document.fr.sl.options[a].innerHTML=document.fr.sl.options[a].value;
document.fr.sl.options[a].style.color=document.fr.sl.options[a].value;
document.fr.sl.options[a].style.backgroundColor="white";}
function js2(){
f1.document.fgColor=document.fr.sl.value;
}
-->
</script>
</form>
<iframe src=index.html name=f1 style="width:80%;height:400;"frameborder=0></iframe>
実行
トップに戻る前に戻る　次に進む
SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送