投稿2019/10/10 14:03
編集2019/10/11 05:53はじめまして。
何日もかかって調べましたが、どうしてもわかりませんでしたので、
どなたかご教授お願い致します。
ローカルにあるＨＴＭＬファイルをＤＯＭとして取得し、ソースを書き換える方法を探しています。
まず、ＨＴＭＬファイルのソースを文字列として取得する方法として、下記サイトを参考にさせて頂きました。
https://www.excellence-blog.com/2018/02/02/html%E3%81%A7%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80/
オブジェクトタグのdata属性にhtmlファイル名を設定しています。
javascript
1#<object id="aaatext" data="aaa.html" type="text/plain" style="display:none"></object> 2 <script> 3 var obj = document.getElementById("aaatext"); 4 obj.onload = function() { 5 var loadtext = obj.contentDocument.documentElement.textContent; 6 alert(loadtext); 7 } 8 </script> 9
次に、文字列をDOMとして取得する方法は下記のサイトを参考にさせて頂きました。
http://donsuka-kk.hatenablog.com/entry/20140228/1393596415
javascript
1( function() {"use strict"; 2 3 var text = "<!DOCTYPE html>"; 4 text += "<head>"; 5 text += "<title>test</title>"; 6 text += "<meta charset='UTF-8'/>"; 7 text += "<meta name='viewport' content='width=device-width,user-scalable=no'/>"; 8 text += "</head>"; 9 text += "<body>"; 10 text += "<h1>test</h1>"; 11 text += "<div id='section1'>section1</div>"; 12 text += "<p>これはテストです。</p>"; 13 text += "</body>"; 14 15 16function getDom(txt) { 17 var htmlDoc; 18 htmlDoc = document.implementation.createHTMLDocument('dom'); 19 htmlDoc.documentElement.innerHTML = txt; 20 return htmlDoc; 21} 22 23 function init() { 24 var target = document.getElementById('target'); 25 target.innerHTML = '初期値'; 26 var DOM = getDom(text); 27 console.log(DOM); 28 target.innerHTML += DOM.getElementById('section1').textContent; 29 } 30 31 if (document.body) { 32 init(); 33 } else { 34 document.addEventListener('DOMContentLoaded', init, false); 35 } 36 }()); 37
上記の text +=の部分を最初のソースにあるloadtextに置き換えてみたのですが、上手く行きません。
IEではalert(loadtext)できちんとソースコードが表示されています。
どのようにcreateHTMLDocumentの引数に設定したらよいでしょうか？
10/11追加
以下が実際に書いたコードです。
javascript
1<html> 2<head> 3<title>test</title> 4</head> 5<body> 6 7<object id="ob1" type="text/html" data="sample.html"> 8</object> 9 10<script type="text/javascript"> 11 12var obj = document.getElementById("ob1"); 13 obj.onload = function() { 14 var loadtext = obj.contentDocument.documentElement.textContent; 15 //var loadtext = obj.contentDocument.documentElement.outerHTML 16 console.log(loadtext); 17 } 18 19function getDom(txt) { 20 var htmlDoc; 21 htmlDoc = document.implementation.createHTMLDocument('dom'); 22 htmlDoc.documentElement.innerHTML = txt; 23 return htmlDoc; 24} 25 26var DOM = getDom(loadtext); 27console.log(DOM.getElementById('ichiran').textContent); 28 29</script> 30 31</body> 32</html>
miyabi_takatsuk 様
dodox86 様
m.ts10806 様（タグ追加の手続きは自分ではできないようですので、後程行います）
ご指摘ありがとうございます。投稿内容修正いたしましたのでご確認のほどよろしくお願いいたします。
Chromeで開いた状態で以下のエラーです。
getDom(text)のところで loadtext is not defined というエラーがでます。
documentElement.textContent;のところで documentElement' of null というエラーがでます。
IEではalertはでますが、console.logが表示されません。
ご教示のほどよろしくお願いいたします。
回答1件
0
ベストアンサー
Chrome の場合、ローカルファイルで .contentDocument プロパティを読むには --allow-file-access-from-files オプションを使う必要があります。
http://bukiyouengineermemo.blog.jp/archives/2423546.html
sample.html が通常の HTML であれば、
obj.contentDocument.getElementById('ichiran').textContent
でいいはずで、いちいちほかの document に入れなおしているのはよくわかりません。
JavaScript
1obj.onload = function(event) { 2 console.log(obj.contentDocument.getElementById('ichiran').textContent); 3};
投稿2019/10/11 06:55
編集2019/10/15 00:45
総合スコア13749
あなたの回答
tips
プレビュー
Q&A
