質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

3316閲覧

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

Nect

総合スコア21

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/02/15 13:57

編集2017/02/15 14:27

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

只今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と同じ構造になります

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/02/15 14:05

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

回答2

0

自己解決

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

投稿2017/05/18 11:38

Nect

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/05/18 11:40

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

0

$("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

総合スコア69400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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構築できない場合が有ると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問