JavaScriptのdocument.write()でページの内容を書き換えたいのですが、NNで<や>の表示がおかしい

[上に] [前に] [次に]
MoW [E-Mail] [HomePage] 2000/04/02(日) 10:58:18
JavaScriptを利用して、掲示板にメッセージを投稿する前にプレビューを表示でき
るようにしようと考えています。

手順としては、
１．入力フォーム(input.html)で入力
２．previewボタンを押すと別ウィンドウにpreview.htmlを開く。
３．preview.htmlの内容を入力の内容によって変化させる(document.writeを使用)。
　　その際、HTMLタグ< >は&lt; &gt;に変換する
といった感じです。

ソースは次の通りです。（全角スペースを含んでいます）
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("<", "&lt;");
　　while (str.indexOf(">", 0) > -1)
　　　　str = str.replace(">", "&gt;");
　　while (str.indexOf('"', 0) > -1)
　　　　str = str.replace('"', '&quot;');
　　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
やっぱりＮＮのバグみたいです。
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("<", "&lt;");
while (str.indexOf(">", 0) > -1)
  str = str.replace(">", "&gt;");
while (str.indexOf('"', 0) > -1)
  str = str.replace('"', '&quot;');
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ウィンドウの
大きさを変更することが出来なくなってしまいました（最大最小化は出来ますが）。
そこで、自分なりにいろいろ調べて対処できたので修正版第２版を。

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でもうまくいくようになりました。
同様の問題で悩んでいる人がいたら、参考にしてみて下さいね。
[上に] [前に] [次に]