JavaScriptのdocument.write()でページの内容を書き換えたいのですが、NNで<や>の表示がおかしい
[上に]
[前に]
[次に]
MoW
[E-Mail]
[HomePage]
2000/04/02(日) 10:58:18
JavaScriptを利用して、掲示板にメッセージを投稿する前にプレビューを表示でき
るようにしようと考えています。
手順としては、
1.入力フォーム(input.html)で入力
2.previewボタンを押すと別ウィンドウにpreview.htmlを開く。
3.preview.htmlの内容を入力の内容によって変化させる(document.writeを使用)。
その際、HTMLタグ< >は< >に変換する
といった感じです。
ソースは次の通りです。(全角スペースを含んでいます)
http://user1.allnet.ne.jp/~yamauchi/test/input.html
------------------------------------------------------------------------
<HTML><HEAD>
<SCRIPT language="JavaScript">
<!--
function preview(){
preview_win
= window.open("preview.html","PreviewWindow","width=200,height=100,scrollbars,resizable");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4>HTMLタグを無効化して別ウィンドウに表示する</h4>
<FORM><INPUT size="20" type="text">
<INPUT type="button" value="preview" onClick="preview();">
</FORM></BODY></HTML>
------------------------------------------------------------------------
http://user1.allnet.ne.jp/~yamauchi/test/preview.html
------------------------------------------------------------------------
<HTML><HEAD><TITLE>preview</TITLE>
<SCRIPT language="JavaScript">
<!--
// HTMLタグを無効にする関数
function replace(str) {
var comp="";
var i = str.indexOf("&", 0);
while (i > -1) {
comp += str.substring(0, i+1) + "amp;";
str = str.substring(i+1, str.length);
i = str.indexOf("&", 0);
}
str = comp + str;
while (str.indexOf("<", 0) > -1)
str = str.replace("<", "<");
while (str.indexOf(">", 0) > -1)
str = str.replace(">", ">");
while (str.indexOf('"', 0) > -1)
str = str.replace('"', '"');
prompt("変換後の文字列",str);
return str;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<h4>Resize(Reload)してみて下さい.</h4>
<SCRIPT language="JavaScript">
<!--
document.write(replace(window.opener.document.forms[0].elements[0].value));
// -->
</SCRIPT>
</BODY>
</HTML>
------------------------------------------------------------------------
入力フォームでHTMLタグ付きの文字列を入力した場合、 IEにおけるPreviewの表示
は、 思惑通りタグが無効になって表示されるのですが、 NN(自分のはNetscape
Communicator 4.7)では、 最初の表示ではタグが無効になって表示されるのです
が、ウィンドウの大きさを変える(Reloadされる)とHTMLタグが有効になってしま
います。
ReloadされてもHTMLタグを無効にして表示するにはどうすればよいのでしょうか?
よろしくお願いします。
Phine
2000/04/02(日) 11:33:29
バグでしょうか?
まだ試してませんけど、
var preview = replace( 〜
document.write(preview) ;
としてみてはどうでしょうか。
これでも駄目だったらとりあえず
window.onresize だけでも処理しておく手もあります。
MoW
2000/04/02(日) 13:08:46
とりあえず、
var text = replace(window.opener.document.forms[0].elements[0].value);
document.write(text);
としてみましたが、うまくいきませんでした。
で、勘違いしてましたがResizeしたときはReloadされる訳ではないんですね。
そこで、preview2(preview2.html)として
function refresh() {
window.location.href=window.location.href;
}
window.onresize = refresh;
を加えたモノを作ってみました。
そうしたらうまくいきましたが、どうも原因が分からないので半分解決という事に
しておきます。
http://user1.allnet.ne.jp/~yamauchi/test/input.html
Phine
2000/04/02(日) 20:13:19
やっぱりNNのバグみたいです。
http://www.shiojiri.ne.jp/~openspc/JavaScript/index.html
のブラウザ別バグリストのページに載ってました。
MoW
[E-Mail]
[HomePage]
2000/04/03(月) 02:24:57
バグじゃしょうがないですね。
っていうか、「一撃必殺〜〜」のページはよく利用しているのに、気付よオレ!?
お手間をとらせてすみませんでした。
という訳で、修正版のソースを載せておきます。
自分のサーバのファイルはそのうち削除するので。
■ input.html (特に修正なし)
------------------------------------------------------------------------
<HTML><HEAD>
<SCRIPT language="JavaScript">
<!--
function preview(){
preview_win
= window.open("preview.html","PreviewWindow","width=200,height=100,scrollbars,resizable");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H4>HTMLタグを無効化して別ウィンドウに表示する</H4>
<FORM>
<INPUT size="20" type="text" value="<B><U>test</U></B>">
<INPUT type="button" value="preview" onclick="preview();">
</FORM>
</BODY></HTML>
------------------------------------------------------------------------
■ preview.html
------------------------------------------------------------------------
<HTML><HEAD><TITLE>preview</TITLE>
<SCRIPT language="JavaScript">
<!--
// HTMLタグを無効にする関数(修正なし)
function replace(str) {
var comp="";
var i = str.indexOf("&", 0);
while (i > -1) {
comp += str.substring(0, i+1) + "amp;";
str = str.substring(i+1, str.length);
i = str.indexOf("&", 0);
}
str = comp + str;
while (str.indexOf("<", 0) > -1)
str = str.replace("<", "<");
while (str.indexOf(">", 0) > -1)
str = str.replace(">", ">");
while (str.indexOf('"', 0) > -1)
str = str.replace('"', '"');
return str;
}
// 以下、追加したスクリプト
// ウィンドウがリサイズされたら、preview.htmlをReloadする
function refresh() {
window.location.href=window.location.href;
}
window.onresize = refresh;
// -->
</SCRIPT>
</HEAD>
<BODY>
<h4>Resizeしてみて下さい.</h4>
<SCRIPT language="JavaScript">
<!--
document.write(replace(window.opener.document.forms[0].elements[0].value));
// -->
</SCRIPT>
</BODY></HTML>
------------------------------------------------------------------------
MoW
2000/04/03(月) 02:26:48
[[解決]]
もちろん解決です。忘れてた.....^_^;;;
MoW
[E-Mail]
[HomePage]
2000/04/03(月) 16:18:25
「めでたしめでたし」と思っていたら、今度はIE5.0でPreviewウィンドウの
大きさを変更することが出来なくなってしまいました(最大最小化は出来ますが)。
そこで、自分なりにいろいろ調べて対処できたので修正版第2版を。
preview.htmlに追加していた
------------------------------------------------------------------------
// 以下、追加したスクリプト
// ウィンドウがリサイズされたら、preview.htmlをReloadする
function refresh() {
window.location.href=window.location.href;
}
window.onresize = refresh;
------------------------------------------------------------------------
を削除して、新たに下記のスクリプトに変更しました。
------------------------------------------------------------------------
// resize.js 0.3 970811
// by gary smith
// js component for "reloading page onResize"
if(!window.saveInnerWidth) {
window.onresize = resize;
window.saveInnerWidth = window.innerWidth;
window.saveInnerHeight = window.innerHeight;
}
function resize() {
if (saveInnerWidth < window.innerWidth || saveInnerHeight < window.innerHeight ||
saveInnerWidth > window.innerWidth || saveInnerHeight > window.innerHeight)
window.history.go(0);
}
------------------------------------------------------------------------
これでIE5.0でもうまくいくようになりました。
同様の問題で悩んでいる人がいたら、参考にしてみて下さいね。
[上に]
[前に]
[次に]