質問: ($('#filepass').val()); //記入されたファイルパス取得(今回で言うtestB.html) $.ajax({ url: filepass, type: 'GET', dataType: 'html', success: function (data) { $('.hoge').html(data); //hogeエリアにコードを書き出し }, error: function (data) { $('.error').fadeIn(); //取得できなかったらエラーメッセージを表示 } }); ``` 以下がtestA.html ``` ここにtestB.htmlのHTMLが書き出しされる 取得されたあとここで取得したHTMLを書き換えたりする 取得できませんでした。 ``` 以下がtestB.html ``` サンプルテキストサンプルテキストサンプルテキスト ``` ### 発生している問題 結論から申しますと、**testB.htmlの「ahan.js」がtestA.html上で発火して不具合を起こしています**。 testB.htmlのファイルの内容を丸っと持ってきてしまっているため、HTMLを取得した後testA.htmlの.hogeに出力させてしまうと testB.html内の「ahan.js」がtestA.html上で発火してしまい本来持ってきたかった素のHTMLではない状態になってしまいます。 最初の「実現したいこと」の項目の6番で、最終的にはHTMLファイルとして書き出したいので 最初に取得したファイルの状態と同じ状態になってほしいのですが、 ahan.jsが発火してしまうため書き出しの際には余計なクラスやスタイルまでもが保存されてしまいます。 ### 試したこと ・testB.htmlを取得した後、いったん.hogeに書き出し、その後Scriptタグのみ削除し残った部分でクローンを作成。 →ダメでした ・preタグ、codeタグで囲む →当然ダメでした(エスケープも考慮したが、実現したいことの5番が実現できなくなるので却下) ・参考サイトを探して試した スクリプトでスクリプトを停止させることの難しさ。 動的に特定のScriptタグを削除 →できませんでした ### 補足情報 上記ではahan.jsのみで質問を上げていますが実際は何十個ものjsファイルが発火してしまっているのでそもそも.hoge配下のScriptタグはすべて実行させないようにする必要があります。 最終的に書き出しの際に一つのファイルにまとまればよいので、必ずしもすべてのHTMLがいったんtestA.htmlに書き出される必要はありません。 さらに.hogeに書き出した内容は画面上には表示しません。なので表示崩れとかそういうのも気にしないのでとにかくHTMLが巣の状態であればうれしいです...! ▼お聞きしたいこと 解決策として以下は実現可能かどうか。 1. testB.htmlからHTMLを取得後すぐ.hogeに書き出すのではなく、jsもしくはajaxそうさで必要な部分だけ抽出することはできるのか →またそれが可能な場合ファイル書き出しの際に結合可能か 2. そもそもtestB.htmlから丸っと取得するのではなく抜粋した部分だけ取得することはできるのか 3. 私が考えている方法以外で解決策があればご教示いただければと思います。 ※都合上PHP等のサーバーサイド言語の利用ができないため、js・Ajax等で解決したいと考えています。 もしサーバーサイド使わないと無理という内容であればそれも不躾ながらご教示いただければ幸いです。
回答: たぶん、下記のようにするとスクリプトは実行されません。 ``` $('.hoge').get(0).innerHTML = data; ``` 【element.innerHTML - Web API | MDN】 ただ、そもそもの話、保存することが目的なら、現在のHTMLに書き出す必要がありません。 また、複数のファイルを取ってきて1枚のHTMLにするのは無理があります。(HTMLの中で1つしか持てないHEAD要素はどうするのかとか) とりあえず書き出す手段は下記のようなものを参考に書き換えていけば、できるとは思います。 【JavaScript実行済みのDOMをHTMLファイルとして保存するブックマークレット - 無駄と文化】 【JavaScript でファイル保存・開くダイアログを出して読み書きするまとめ - Qiita】