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

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

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

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2094閲覧

iframeでjavascriptを読み込み親ページで外部ファイルを読み込む

natsu69

総合スコア15

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/08/25 08:07

編集2017/08/25 08:23

ご教授お願い致します。

html内にiframe設置しそのiframe内にjavascriptを使い親ページに外部htmlファイルを読み込みたいのですがわかりません。

親ページ

html

1<body> 2<iframe src="js.ht 3ml"></iframe> 4<div id="#header"> 5</div> 6</body>

js.html

html

1<html> 2<head> 3<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 4<script> 5$(function(){ 6$("#header").load("header.html"); 7}) 8</script> 9</head> 10<body> 11</body> 12</html>

header.html

html

1<html> 2<head> 3</head> 4<body> 5<div> 6<p>内容</p> 7</div> 8</body> 9</html>

このような感じで少しややこしい感じですが、これでうまく読み込む方法がお分かりの方教えてください。
よろしくお願い致します。

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

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

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

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

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

kei344

2017/08/25 08:08

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
m.ts10806

2017/08/25 08:11 編集

親ページにjavascriptのコードを直接埋め込むのではダメなのでしょうか?用途は分かりませんが、js.htmlの存在自体があまり意味がないように思います。
natsu69

2017/08/25 08:13

kei344様 初めてなもので投稿方法わからず、すみません。編集してみます。
natsu69

2017/08/25 08:15

mts10806様 本来であればそのようにするのですが、ECサイトのシステム都合によりこのような方法をとりたいのです。すみません
m.ts10806

2017/08/25 08:19

js.htmlではjquery記述を用いているにも関わらずjquery本体の読み込みを行っていないように見受けられます。そこは問題ないでしょうか?
natsu69

2017/08/25 08:21

すみません、ここでは記載ミスでちゃんと読み込んでいます
kei344

2017/08/25 08:31

iframeを設置しているページのドメインとiframe内のページのドメインは同じですか?
natsu69

2017/08/25 08:32

kei344様 ドメインは同じです。
kei344

2017/08/25 10:32

楽天ショップということですが、iframe内のページは「楽天GOLD」に設置されていませんか?
natsu69

2017/08/25 16:29 編集

kei344様 iframeはgoldにしています。親ページは違います
guest

回答3

0

HTML

1<!--div id="#header"--> 2<div id="header">

JavaScript

1$(window.parent.document.getElementById('header')).load("header.html");

投稿2017/08/25 08:51

x_x

総合スコア13749

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

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

natsu69

2017/08/25 08:58

すみません、楽天ショップ内で使用したいのですが、できないです。 これでいかないということは厳しいのですかね?
x_x

2017/08/25 09:01

エラーは何か出ていますか?
natsu69

2017/08/25 09:02

何もでていません。 ただ読み込んでくれないです。
x_x

2017/08/25 09:05

F12キーを押して開発者ツールを開き、コンソールを表示した状態で試してもらえますか?
natsu69

2017/08/25 09:07

試しましたが、中身は空でした
x_x

2017/08/25 09:11

子フレームの該当行↓にブレークポイントを置いてリロードしたとき、止まるでしょうか? $(window.parent.document.getElementById('header')).load("header.html");
natsu69

2017/08/25 09:14

止まらないですね
x_x

2017/08/25 09:18

止まらないということは、そこまでたどり着いていないということです。 提示されていないところですので、どこまで動いているのか調べてみてください。
natsu69

2017/08/25 09:19

分かりました。 ご丁寧にありがとうございます
guest

0

jQuery() は第二引数でコンテキストオブジェクトを指定することが出来ます。

JavaScript

1jQuery("#header", parent).load("header.html");

Re: natsu69 さん

投稿2017/08/25 08:41

think49

総合スコア18156

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

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

natsu69

2017/08/25 08:58

すみません、楽天ショップ内で使用したいのですが、できないです。 これでいかないということは厳しいのですかね?
guest

0

ベストアンサー

iframeはgoldにしています。親ページは違います

楽天GOLDと商品ページ(トップページ/個別商品ページ/カテゴリページ等)は違うドメインです。
別ドメインのiframeは相互にアクセスすることができません。

投稿2017/08/25 17:07

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問