ajaxで取得した外部サイトから情報を取得したい

いつもお世話になっております

只今Monaca + AngularJSを利用して
PC専用サイトをモバイル用に編集するアプリを開発しております

対象URLからajaxでHTMLを取得し、jqueryでframeのsrcを取得したいのですが[object]と表示されるのみで取得できません

どなたかご教授いただけたらと思います

コード全文は以下になります

index.html

javascript
1<!DOCTYPE HTML>
2<html ng-app="myApp">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11        var app = angular.module('myApp', ['onsen']);
12        app.value('pwds', {
13          'toppage' : 7462,
14          'username': '',
15          'userpwd': '',
16          });
17          
18        app.value('urls', {
19          'index' : 'Dat URL',
20          'login' : ''
21        });
22        
23        app.factory('HTTPRequestService', ['$http', '$httpParamSerializerJQLike', 
24        function($http, $httpParamSerializerJQLike){
25          var httpRequestService = {};
26          
27          httpRequestService.getHtml = function(address, datas, callback){
28            console.debug('request ' + address);
29            $http({
30              method : 'POST',
31              headers : {
32                'Content-Type' : 'application/x-www-form-urlencoded'
33              },
34              transformRequest : $httpParamSerializerJQLike,
35              url : address,
36              data : datas
37            }).success(function(data, status, header, config){
38              callback(data);
39            });
40          };
41          
42          return httpRequestService;
43        }]);
44        
45        app.controller('PageController', ['$scope', 'HTTPRequestService', 'pwds', 'urls', 
46          function($scope, HTTPRequestService, pwds, urls){
47            $scope.pwds = pwds;
48            $scope.urls = urls;
49            $scope.data = 'no name';
50            
51            $scope.firstLogin = function(){
52              $(function () {
53                  $.ajax({
54                      url: urls.index,
55                      type: 'POST',
56                      dataType: 'html'
57                  })
58                  .done(function (data) {
59                      console.debug(data);
60                      console.debug($("frame").append(data).attr("src"));
61                  });
62              });
63              
64              $scope.app.slidingMenu.setMainPage('page1.html');
65            }
66          }]);
67    </script>
68</head>
69<body>
70    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="toppage.html" side="left" type="overlay" max-slide-distance="200px">
71    </ons-sliding-menu>
72</body>
73</html>
74

toppage.html

javascript
1<ons-navigator ng-controller="PageController">
2   <ons-page>
3        <ons-toolbar>
4            <div class="center">実力試験道場Mobile</div>
5        </ons-toolbar>
6
7        <div style="text-align: center; margin-top=30px;">
8            <h1>道場Login Page</h1>
9            <p> 今月の実力試験道場のパスワードを教えてください</p>
10            
11            <p>
12              <input class="text-input" type="number" modifier='underbar' ng-model='pwds.toppage' placeholder="Password"> </input>
13            </p>
14            <ons-button
15                ng-click="firstLogin()">
16                Start
17            </ons-button>
18        </div>
19    </ons-page>
20</ons-navigator>

#追記

今回の対象サイトは
https://library.rail-e.or.jp/
となります
※会員制サイトですが、個人目的に留める予定です

取得したいサイトはログイン後のページですが、
こちらのURLと同じ構造になります

kei344

2017/02/15 14:05

「$("frame").append(data).attr("src")」の frame は取得対象ページにあるものでしょうか？

行動規範の内容に同意します

回答2件

自己解決

自己解決しました
ありがとうございました

投稿2017/05/18 11:38

Nect

総合スコア21

kei344

2017/05/18 11:40

どのように解決したかを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

行動規範の内容に同意します

$("frame").append(data).attr("src")
↑
このコードは、Ajaxを実行した「index.html 」に有る frame要素を探し、それにAjaxの結果を要素内に入れようとしています。その上で frame要素の src属性を参照している、というコードです。

DOMParser とか使うか、$( data ).find( 'frame' ).attr( 'src' ) とか。

【DOMParser - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/DOMParser

【JavaScriptプログラミング講座【DOMParser について】】
http://hakuhin.jp/js/dom_parser.html

投稿2017/02/15 15:18

kei344

総合スコア69610

Nect

2017/02/16 22:11

firstLogin内で ```javascript $(function () { $.ajax({ url: urls.index, type: 'POST', dataType: 'html' }) .done(function (data) { console.debug(data); console.debug($(data).find("frame").attr("src")); }); }); ``` を実行したところ、結果がundefinedとなってしまいました… できればセレクタで指定して行いたかったですが、DOMParserを試してみます

kei344

2017/02/16 22:17

もし、console.debug(data); が undefined ならそもそも受け取れていませんよ。

Nect

2017/02/18 07:06 編集

console.debug(data);は正しい結果を出していますがその下がundifinedという状況ですひとつ気になっているのはdataの型がstringで返されているのですが、正しい挙動なのでしょうか？

turbgraphics200

2017/02/18 06:53

dataTypeを指定しないもしくは'xml'にしないとだめかと。

kei344

2017/02/25 05:04

> ひとつ気になっているのはdataの型がstringで返されているのですが、正しい挙動なのでしょうか？ HTMLは文字列で返ってくるのでstringです。jQueryやDOMParserでパースしないとHTMLElementにはなりません。（DOMは typeof obj で調べたら "object"、obj instanceof HTMLElement で調べたら true ） console.debug($(data));でDOMになっているかとりあえず確認して、それからframeを探してみてはいかがでしょうか。ただ、HTMLが構文的に間違っていると正しくDOM構築できない場合が有ると思います。

行動規範の内容に同意します

あなたの回答