仕事のお問い合わせ対応でiframe内に埋め込んだインスタグラムのタグが変な動きをしてそれを正常な状態に戻すのにめっちゃ手間取ったので自分用にメモ．
そもそも
はてブロでいうHTML編集にインスタのタグを埋め込んで保存したら見たまま編集で画面がうまく読み込まれないで正常な表示がされなかった．
でも表の画面では正常に動いていた．
管理画面側の表示でなんかよろしくない動作をしてるっぽい．
なんだよこれ．
調査
・タグ内で外部のjsのソースを呼んでいたのだがFirebugのコンソールに
ReferenceError: hoge is not defined (そんな関数定義されてねーよ)
って怒られた
- frame内で外部ソースのjsを読み込んでいたけどうまくそれが参照されていないっぽい？
- どうやらiframe内でjs読み込んでもiframe外で呼んだと認識されているらしく，iframe内でjsの関数を呼び出しても呼び出せていなかった
(この認識で合っているかはわからない．今後要調査．)
・精神をかなりすり減らしながら悩みに悩んだけどわからず
- そもそもFirebugの使い方もいまいちわかっていなかった
・下記サイトを参考にしつつスクリプトタブでブレークポイント作成して画面とにらめっこ
FireBugのDebuggerの使い方 - JavaScriptist
・どうやら変数内にjson形式でhtmlのタグ情報が入っているっぽいのを発見
・とりあえずその変数に代入されているところにブレークポイント作成
・ステップ実行して様子を見ていたらウォッチタブに色々要素が入っているのを見つける
- ブレークポイントを過ぎた直後ここに変数とjsonのデータが表示されていた
- 右クリックで「ウォッチを追加」したら変数に別の値を代入できるっぽい
- json内の原因のタグを削除したものを「this.hoge = {}」って感じでやったら代入できた．
・その後ステップ実行していったらうまく管理画面が表示された．
・そのまま保存もできたのでなんとか解決．
わけわからなすぎて禿げるかと思った．
Firebugの詳しい解説が意外と無くて焦った．
そもそも画面の描画の手順の仕組みがわかっていなかった．
そこら辺どうやって学んでいけばいいんだろうか．
先輩はちゃちゃっと対応していたから経験の差なのかな．
[amazonjs asin="4777516032" locale="JP" title="わかるFirefox―人気ブラウザの「基本操作」から「アドオン」まで (I・O BOOKS)"]
コメント