dポイントプレゼントキャンペーン実施中！

詳しい人求む！

昔作ったHPのjavascritがグーグルクロームで動きません。

解決済

  • 質問者：いとか
  • 質問日時：
  • 回答数：5件

10年近く前になりますが個人の趣味HPを作っていてサムネイル画像に触るとifame内に画像とそのコメントが変わる仕組みにしていたのですが久しぶりに見るとIEやedgeでは問題なく動くのですがchromeでは動かなくなっておりました。原因がわからない為、有識者の方からアドバイスをいただければと思います。

HPは恥ずかしいので余分なところを省いたソースを下記に掲載します。
chromeで動くようにするにはどこを変えればよいのでしょうか？
「window.parent.photo.window.document.images」の書き方が違ってくるのでしょうか？

<SCRIPT LANGUAGE="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=3)
{
movimg=new Array()
movimg[00] = new Image();movimg[00].src="b_pic/b_pic00.jpg";
movimg[01] = new Image();movimg[01].src="b_pic/b_pic01.jpg";
movimg[02] = new Image();movimg[02].src="b_pic/b_pic02.jpg";
};
var dum = "";
function changImg1(imgNoA,imgNoB)
{
if(navigator.appVersion.charAt(0)>=3){
//読込中の場合
if (!movimg[imgNoB].complete) {
if (window.parent.photo.window.document.images[imgNoA].src!= dum ) {
window.parent.photo.window.document.images[imgNoA].src=dummy.src;
dum = window.parent.photo.window.document.images[imgNoA].src;
}
}else{
window.parent.photo.window.document.images[imgNoA].src=movimg[imgNoB].src;
}
}
};
<!---->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var dummy= new Image();
dummy.src="../../img/dummy.jpg";
<!---->

</SCRIPT>
<body>
<div align="center">
<form name="e0" method="post" action="">
<a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,00);document.forms[0].e0.value='タイトル1\n　文章１'">
<img src="s_pic/s_pic00.jpg" width="100" height="75" border="0"></a>
<a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,01);document.forms[0].e0.value='タイトル2\n　文章２'">
<img src="s_pic/s_pic01.jpg" width="100" height="75" border="0"></a>
<a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,02);document.forms[0].e0.value='タイトル2\n　文章３'">
<img src="s_pic/s_pic02.jpg" width="100" height="75" border="0"></a>
<iframe name=photo src="b_pic/b_pic38.jpg" width="500" height="375" frameborder="0" marginheight="0"></iframe>
<form name="e0" method="post" action="" leftmargin="0" topmargin="0" marginwidth="0" bottmmargin="0">
<textarea name="e0" cols="68" rows="5">画像集</textarea>
</form>
</form>
</div>

質問者からの補足コメント

  • キャッシュでは無さそうですね。他のマシン含めて動かないので・・・

    No.1の回答に寄せられた補足コメントです。 補足日時：2019/01/06 15:50
    通報する

  • つらい・・・

    申し訳ございませんがよくわからないです。
    下記を記載するHTMLファイルを別途用意するということでしょうか？
    <iframe src="hoge.htm"></iframe>
    <iframe src="fuga.htm" name="photo"></iframe>

    うまくいきませんでした。

    No.2の回答に寄せられた補足コメントです。 補足日時：2019/01/07 17:11
    通報する

  • うーん・・・

    元のソースはiframe内の画像を置き換えるだけの作りなのでhtmlは1つだけです。
    それを親を含めて3つに分解するということでしょうか？
    「fuga.htmに以下を指定して下さい <img src="">」というのも意味が分からなかったです。

    No.3の回答に寄せられた補足コメントです。 補足日時：2019/01/07 17:42
    通報する

  • へこむわー

    それで書いても変わらないです。

    アラート入れながら余計なタグを削除して確認したところ
    下記のソースだとアラート１は出ますが2が出ませんでした。
    クローム以外は出ます・・・

    alert(1)
    photo.document.images[imgNoA].src=movimg[imgNoB].src;
    alert(2)

    No.4の回答に寄せられた補足コメントです。 補足日時：2019/01/07 18:28
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

参考程度に

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



すでに解決しているのかも知れませんが・・・

＞サムネイル画像に触るとifame内に画像とそのコメントが変わる仕組み
ざっと眺めましたが、なぜiframeにしてあるのかが不明です。
単に画像を表示しているだけなので、わざわざ別ドキュメントにする意図がわかりません。

＞10年近く前に
・・・とのことなので
＞navigator.appVersion.charAt(0)>=3
が、何をチェックしているのか（今となっては）わからないでしょうし、現状では、（多分）このチェックはほとんど意味をなしていないのではないかと想像します。
（エージェントに関係なく、appVersionだけを調べているという意味も不明です）


何となくの勝手な想像で、『iframeを用いない同様の仕組み』を作成してみました。
HTMLもスクリプトも、多少はすっきりしたのではと思います。
（Fx64、Chrome71、IE11にて動作確認済）
（ただし、「画像の先読みチェック」はひとまず省略しています。）

そのままコピペの上、画像のアドレスを調整して試してみてください。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#wrap { display:flex; flex-direction:column; }
#wrap>div { text-align:center; }
#thumbnail { display:flex; justify-content:center; }
#thumbnail img { width:100px; height:75px; margin:6px 3px; cursor:pointer; }
.largeImage { display:inline-block; width:500px; height:375px; }
.largeImage img { width:100%; }
</style>

<script type="text/javascript">
document.addEventListener("mouseover", function(e){
let t = e.target;
if(t.nodeName != "IMG" || t.parentNode.id != "thumbnail") return;
let txt = t.dataset.text.replace("\\n","\n");
document.querySelector(".largeImage img").src = t.dataset.src;
document.querySelector("#wrap textarea[name='e0']").value = txt;
}, false);
</script>
</head>

<body>

<div id="wrap">
<div id="thumbnail">
<img src="s_pic/s_pic00.jpg" data-src="b_pic/b_pic00.jpg" data-text="タイトル1\n 文章１" />
<img src="s_pic/s_pic01.jpg" data-src="b_pic/b_pic01.jpg" data-text="タイトル2\n 文章 2" />
<img src="s_pic/s_pic03.jpg" data-src="b_pic/b_pic02.jpg" data-text="タイトル3\n 文章 3" />
</div>
<div>
<span class="largeImage"><img src="../../img/dummy.jpg" /></span>
</div>
<div><textarea name="e0" cols="68" rows="5">画像集</textarea></div>
</div>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

わざわざありがとうございます。
私も昔のソースはあきらめて0から改良しiflameは無しにしました

通報する
お礼日時：2019/01/10 17:30

No.4

  • 回答者： yambejp
  • 回答日時：

あー、ちょっと勘違いだったかも


1ファイルで自分自身に画像があるのですね

そうなると
window.parent.photo.window.document.images
が
photo.document.images
的な書き方になるのような気がします
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

iframeを使うとご自身で書いてますよね？


iframeに表示するhtmlを2つ別途用意する必要があるのはわかりますか？
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

親ページがこんなふうなら行けるのでは？



<iframe src="hoge.htm"></iframe>
<iframe src="fuga.htm" name="photo"></iframe>

この上でhoge.htmに例示のhtmlを
fuga.htmに以下を指定して下さい

<img src="">
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： goold-man
  • 回答日時：

chromeはアップデート更新しています。


（便利なキャッシュも古いと使えないかも）「キャッシュのクリア」を実行してみるのは？

chromeの拡張機能があります。「Clear Cache」chromeの拡張機能
ボタン一つで簡単にキャッシュがクリアできる拡張機能をダウンロード
「Clear Cache」：自己責任
https://incloop.com/%E3%83%9B%E3%83%BC%E3%83%A0% …

JavaScriptは見ていません。（私のHPは「自動」で作成したもの）
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報