Q&A
サーバーサイド言語が無い状態で、保存はどうされるつもりなのでしょう。
###前提・実現したいこと
testA.htmlで、jQuery/Jsonを使用してtestB.htmlのHTMLをまるっと取得しtestA.html内にコピペしようとしています。
※階層は違いますが同一サーバー内です。
▼実現したい流れ
0. inputタグにファイルパスを記入
0. 記入されたファイルパスを変数「filepass」に入れる
0. ajaxを使用して対象ファイルのHTMLを取得
0. 取得で来たら「.hoge」に丸っと貼り付け
0. 読み込んだHTMLをtestA.html上でHTMLの書き換え等の操作を行う（イメージは簡易CMS的な感じ）
0. 書き換えなど作業が終わったら.hoge配下をHTMLファイルとして書き出し（保存）
※保存先はローカルへの保存になります。
js
1var filepass = ($('#filepass').val()); //記入されたファイルパス取得(今回で言うtestB.html) 2 3$.ajax({ 4 url: filepass, 5 type: 'GET', 6 dataType: 'html', 7 success: function (data) { 8 $('.hoge').html(data); //hogeエリアにコードを書き出し 9 }, 10 error: function (data) { 11 $('.error').fadeIn(); //取得できなかったらエラーメッセージを表示 12 } 13});
以下がtestA.html
HTML
1<body> 2 <div class="hoge">ここにtestB.htmlのHTMLが書き出しされる</div> 3 <div class="huga">取得されたあとここで取得したHTMLを書き換えたりする</div> 4 <div class="error" style="display: none;">取得できませんでした。</div> 5</body>
以下がtestB.html
HTML
1<body> 2 <script src="ahan.js"></script> 3 <div class="test">サンプルテキストサンプルテキストサンプルテキスト</div> 4</body>
###発生している問題
結論から申しますと、testB.htmlの「ahan.js」がtestA.html上で発火して不具合を起こしています。
testB.htmlのファイルの内容を丸っと持ってきてしまっているため、HTMLを取得した後testA.htmlの.hogeに出力させてしまうと
testB.html内の「ahan.js」がtestA.html上で発火してしまい本来持ってきたかった素のHTMLではない状態になってしまいます。
最初の「実現したいこと」の項目の６番で、最終的にはHTMLファイルとして書き出したいので
最初に取得したファイルの状態と同じ状態になってほしいのですが、
ahan.jsが発火してしまうため書き出しの際には余計なクラスやスタイルまでもが保存されてしまいます。
試したこと
・testB.htmlを取得した後、いったん.hogeに書き出し、その後Scriptタグのみ削除し残った部分でクローンを作成。
→ダメでした
・preタグ、codeタグで囲む
→当然ダメでした（エスケープも考慮したが、実現したいことの５番が実現できなくなるので却下）
・参考サイトを探して試した
スクリプトでスクリプトを停止させることの難しさ。
動的に特定のScriptタグを削除
→できませんでした
補足情報
上記ではahan.jsのみで質問を上げていますが実際は何十個ものjsファイルが発火してしまっているのでそもそも.hoge配下のScriptタグはすべて実行させないようにする必要があります。
最終的に書き出しの際に一つのファイルにまとまればよいので、必ずしもすべてのHTMLがいったんtestA.htmlに書き出される必要はありません。
さらに.hogeに書き出した内容は画面上には表示しません。なので表示崩れとかそういうのも気にしないのでとにかくHTMLが巣の状態であればうれしいです…！
▼お聞きしたいこと
解決策として以下は実現可能かどうか。
0. testB.htmlからHTMLを取得後すぐ.hogeに書き出すのではなく、jsもしくはajaxそうさで必要な部分だけ抽出することはできるのか
→またそれが可能な場合ファイル書き出しの際に結合可能か
- そもそもtestB.htmlから丸っと取得するのではなく抜粋した部分だけ取得することはできるのか
- 私が考えている方法以外で解決策があればご教示いただければと思います。
※都合上PHP等のサーバーサイド言語の利用ができないため、js・Ajax等で解決したいと考えています。
もしサーバーサイド使わないと無理という内容であればそれも不躾ながらご教示いただければ幸いです。
ファイルの保存先はサーバー内ではなくローカルへの保存なのでPDFのようにサーバーサイド言語がなくても出来るものかと想定していたのですが、ローカルへの保存でもやはりサーバーサイド言語が必須なのでしょうか…？
知識が浅いため理解出来ておらず…
いえ、できなくは無いのですが、保存する形式にあわせる事になるので、そこが決まっているなら提示されたほうがよいのでは、というつもりで質問しました。ザックリした内容になりますがこのあと回答します。
回答2件
0
↓これは上手くいきそうな感じでした。
js
1$( document.createDocumentFragment() ).append( data ).find('script').remove().end().appendTo('.hoge');
投稿2019/02/14 02:00
総合スコア36074
0
ベストアンサー
たぶん、下記のようにするとスクリプトは実行されません。
js
1$('.hoge').get(0).innerHTML = data;
【element.innerHTML - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML#Security_considerations
ただ、そもそもの話、保存することが目的なら、現在のHTMLに書き出す必要がありません。
また、複数のファイルを取ってきて1枚のHTMLにするのは無理があります。（HTMLの中で1つしか持てないHEAD要素はどうするのかとか)
とりあえず書き出す手段は下記のようなものを参考に書き換えていけば、できるとは思います。
【JavaScript実行済みのDOMをHTMLファイルとして保存するブックマークレット - 無駄と文化】
https://blog.mudatobunka.org/entry/2015/12/23/211425
【JavaScript でファイル保存・開くダイアログを出して読み書きするまとめ - Qiita】
https://qiita.com/kerupani129/items/99fd7a768538fcd33420
投稿2019/02/13 16:17
総合スコア69400
回答いただきありがとうございます。
記載頂いた事項に関して返答していきます。
①スクリプトについて
以下コードを付与して実行しましたが動いてしまいます…。
そもそもの記述位置を変えてみました（headタグ内やbody閉じタグ前等）がやはり動きます。
$.ajax({
url: filepass,
type: 'GET',
dataType: 'html',
success: function (data) {
$('.hoge').html(data); //hogeエリアにコードを書き出し
$('.hoge').get(0).innerHTML = data; //スクリプト実行させない
},
error: function (data) {
$('.error').fadeIn(); //取得できなかったらエラーメッセージを表示
}
});
②HTML上に書き出しすることについて
＞そもそもの話、保存することが目的なら、現在のHTMLに書き出す必要がありません
これに関してはtestA.html上で取得したHTMLの書き換え（テキストの修正など）をクライアントサイドで行うために実装しました。
＞複数のファイルを取ってきて1枚のHTMLにするのは無理があります
すみません、誤解を与えてしまいました。
一度に収集するのは一つのファイルのみなので、
testB.htmlからHTMLを取得して.hogeに書き出したら
最初にファイルパスを記入させたinputタグは非表示にします。
そのため「複数ファイルを取ってくる」ではなく、一度の作業では一つのファイルしかとってきません。
（しかしどのみちtestA.htmlに書き出した時点で取得したtestB.htmlのheadタグが消えてしまうのでここも課題として残りますが。。。）
③ファイルの書き出しについて
こちらは大変参考になりました。
実装の際はこちらを使用させていただきます。
> $('.hoge').html(data); //hogeエリアにコードを書き出し
これ削除。
> これに関してはtestA.html上で取得したHTMLの書き換え（テキストの修正など）をクライアントサイドで行うために実装しました。
これをするためにもHTMLをそのまま表示させてはいけません。
テキストエリアを使って、そこで編集するようにしてください。
> K.tukapon さん
あ、つまり、もしかしてCMSを作りたいんですかね。
そしたら、ページのコードをDBなどで管理するのが正攻法じゃないかと思いますよ。
フリーの軽量CMSもいろいろあると思いますし……
@kei344様
> $('.hoge').html(data); //hogeエリアにコードを書き出し
＞これ削除。
こちら削除で想定通りの動きとなりました大変ありがとうございます。
本質問の解決策としての正の挙動となりましたのでこちらをベストアンサーとさせていただきます。
しかしながらコメント頂いた通り
HTMLをそのまま表示させてはいけない等懸念点が多くありますのでそもそもの対応方法含め検討したいと思います。
ご助言頂きありがとうございました。
@Lhankor_Mhy様
認識としてはその通りでCMSを作成するのですが、
要望でクライアントサイド言語でなんとかならないかとお願いをされているためサーバーサイド言語の使用ができません。
（厳密にはサーバー内でPHPが使えないのではなく、使えるが極力使わないでほしいといったものでした）
なのでDB連携も難しく、ネット上で探せる軽量CMSもほとんどがPHPを使用しているためなんとかクライアントサイドで頑張っていた次第でして…
kei344様の回答で本質問に対する回答は解決したのですが、そもそも問題点が多数浮上してきているのでコメント頂いた通り正攻法でやれないか検討してみます。
ありがとうございました。
ほほう、それはまた無茶な要件ですね……
がんばってください！
あなたの回答
tips
プレビュー
