今なら家電が全品9%OFF！

div内に外部のurlを表示させたい

解決済

たびたびお世話になります。

divにスクロールを表示することで、iframeのようにブラウジングすることができますが、
このdiv内に外部のurlを表示させることは可能でしょうか？
検索してみたのですが、思うようなものが見つからず困っています。
それとも、不可能なのでしょうか？

もし可能なのであれば、その方法等簡単に記述していただければ幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「JS 意味」に関するQ&A： pngやjsの後ろの英数字の意味はなんですか？

さらに表示

「意味 width」に関するQ&A： cssでｈｔｍｌ｛width:100%;｝の意味がわかりません

「PAD 意味」に関するQ&A： *{margin:0px;padding:0px;}というＣＳＳのタグの意味について教えてください。

「div 意味」に関するQ&A： <div>の中の<div>の意味

「意味 body」に関するQ&A： the besieged body の意味と訳

A 回答 (5件)

No.1ベストアンサー

iframeの代用はobjectを使うのが定石のようです。



こんな感じでしょうか？
<body>
<div>
<object type="text/html" data="http://www.yahoo.co.jp/" width="600" height="300">
<p>object に対応していない場合はこれが表示される</p>
</object>
</div>
</body>

ただ、Objectタグには制限が多く使いづらい部分もあります。
※たとえば、枠の非表示などができない
CGIやPHP、JavaScriptを介す方法を考えた方が、場合によってはいいかもしれません。

とりあえず、一つの回答ということで…。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： koke29
  • 回答日時：

外部URLの意味わかりました



<body>
<div style="overflow:auto; width:300px; height:150px; border:1px solid #333333; padding:10px;">
<?include("http://www.yahoo.co.jp");?>
</div>
</body>

これでいけますよ

<? ?> の間に入っているのはPHPなのですが
HTMLファイルに埋め込みしているのでhtaccessに
AddType application/x-httpd-php .html
の追記が必要かもしれません
お試しあれ。。。
    • good
    • 1
    • 件
通報する

No.4

  • 回答者： twinhourse
  • 回答日時：

このサイトの18番みたいなことでしょうか。


http://www.shoeisha.com/book/hp/dhtml/

これで使ってる二つのjsファイルを使えば、できると思います。javascriptの記述方法はソースを見れば、何となくわかると思います。

参考URL：http://www.shoeisha.com/book/hp/dhtml/
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： koke29
  • 回答日時：

何かバケちゃいましたが


5行目の最後は</p>です。。。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： koke29
  • 回答日時：

こういうことですかね？？


外部のURLを～ というのがどういうことを指すのかわからないので
質問の答えになっているのかどうかわかりませんが。

↓なら<p>に入れられるものなら何でも入ります。

<body>
<div style="overflow:auto; width:300px; height:150px; border:1px solid #333333; padding:10px;">
<p>あああああ</p>
<p>http://www.yaoo.co.jp</p>
<p><a href="http://www.yaoo.co.jp">http://www.yaoo.co.jp</a> …
<p>あああああ</p>
<p>あああああ</p>
<p>あああああ</p>
<p>あああああ</p>
<p>あああああ</p>
</div>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

アドバイスありがとうございます。

ちょっと私の意図するところとは違うようです。
その方法だと、単純にスクロールを表示させるようにしたDIV内に、
リンクを張っているだけなのでは、と思うのですが。

外部のURLを、という言い回しはちょっと分かり難かったですね。
DIV内に、親ページとは違う独立したページを表示させるということです。
まさにそのままiframeの表示方法です。

通報する
お礼日時：2008/08/27 15:32

このQ&Aに関連する人気のQ&A

「意味 width」に関するQ&A： Ｗ／Ｄ／Ｈ　アルファベットの意味を教えてください

さらに表示

「意味 body」に関するQ&A： 玉音放送の「耐え難きを耐え、忍び難きを忍び」の意味

「PAD 意味」に関するQ&A： 一番頑丈なノートパソコンのメーカは？　

「意味 padding」に関するQ&A： form input テキストを上下中央に表示したい

「JS 意味」に関するQ&A： 漢字を教えて「土に点」

「div 意味」に関するQ&A： grad、div、∇

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qdivの中に外部のHTMLを埋め込む

divの中に外部のHTMLを埋め込む（読み込む）ことはできますか？推奨されていますか？
その際には何というタグで読み込むのでしょうか？

IE8/9を対象にしています。

jqueryで作った独自のコンテンツ（html)を読み込みたいです。
なぜメインのHTMLに直接j独自コンテンツのソースを張ろうと思わなかったのは
こちら側で作ったコンテンツを第三者に配布した場合、
jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったからです。
メインページが読み込むCSSはメインページが利用するCSSただ１つとしておきたいのです。

何かいい方法はありますか？

Aベストアンサー

他のHTMLを読み込む方法は、一般的にはiframeですが、HTML4.01では、DOCTYPEが、framesetしか使えません。しかし、frameset自体が非推奨です。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

　objectを使用することが出来ます。objectは、何でも入れられます。ただし、frameほど複雑なことは出来ません。

　それ以前に、『こちら側で作ったコンテンツを第三者に配布した場合、
jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったからです。』の意味がわかりません。

　少なくともidは、リンク先でも、javascriptのtargetでもないのに使うことは避けましょう。class名はいくら重複してもスタイルシートで区別できるはずです。--ちゃんとしたHTMLならですが・・

<div class="section">
　<h2>見出し</h2>
　<p>記事のまとめ</p>
　<div class="section">
　　<h2>項見出し</h2>
　　<p>簡単な記事</p>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　</div>
</div>
<div class="section">
　<h2>見出し</h2>
　<p>記事のまとめ</p>
　<div class="section">
　　<h2>項見出し</h2>
　　<p>簡単な記事</p>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　　<div class="section">
　　　<h2>サブ項目</h2>
　　</div>
　</div>
</div>
というHTMLがあったとして、スタイルシートを次のように書くことで、すべての<h2>の色が変わりますよね。
(注)上記HTMLのソース中のタブは全角スペースに置換してあるので、タブないし半角スペースに戻してください。

div.section h2{color:red;}
div.section div.section h2{color:blue;}
div.section div.section div.section h2{color:aqua;}
div.section div.section div.section + div.section h2{color:black;}
div.section div.section div.section + div.section + div.section h2{color:maroon;}
div.section + div.section h2{color:fuchsia;}
div.section + div.section div.section h2{color:gray;}
div.section + div.section div.section div.section h2{color:green;}
div.section + div.section div.section div.section + div.section h2{color:lime;}
div.section + div.section div.section div.section + div.section + div.section h2{color:yellow;}

IDは決してデザインのために記述すべきではありません。(スタイルシートの説明のために使うことはありますが、通常のHTMLではリンクのターゲットやjavascriptのターゲットのように、文書中の一意の要素を特定するためだけに使用します。
　class名は、ページ内に何度登場しても良いですが、その目的はIDと同様に
『文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。たとえば、それが本文記事でしたらsectionとか・・。
　もし、そのようにきちんと書かれていたら、そのidやclass名を使って====!!!文書構造を利用して!!!!====スタイルシートでプレゼンテーションを指定していきます。
　しかも多く利用されるスタイルシートは【カスケーディング】スタイルシートですから、カスケーディングの仕組みを利用すると、簡単にデザインしたい要素が決まるはずです。
HTMLが、
.section 編
　　.section 章
　　　　.section 項
と言う形でしたら
二つ目以降の編の　div.section + div.section
項　　　　　　　　　　　　　　　div.section
の二つ目以降の項の　　　　　　　　　　　　　+div.section
のみだし　　　　　　　　　　　　　　　　　　　　　　　　h2
の色は、yellow

と、実に簡単に設定できますね。後からスタイルシートを見るだけでHTMLなんて見なくても意味がわかるし、修正・メンテナンスも簡単です。

★たとえば、簡単に<div>で囲むだけでも、その内部のデザインを他の区別して指定できますよ。
　idをむやみに使わなければダブル事はありません。
　class名は、どんなにダブろうがスタイルシートのセレクタさえきちんと書けば問題ありません。
　　　そもそも、idもclassもそのため--スタイルシートのものではありません。あくまで、文書構造を補完するために付けられたidやclass名を利用するだけです。
　この段階を乗り越えないと、本当の意味でのHTMLとスタイルシートの利用は出来ません。

他のHTMLを読み込む方法は、一般的にはiframeですが、HTML4.01では、DOCTYPEが、framesetしか使えません。しかし、frameset自体が非推奨です。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

　objectを使用することが出来ます。objectは、何でも入れられます。ただし、frameほど複雑なことは出来ません。

　それ以前に、『こちら側で作ったコンテンツを第...続きを読む

他の回答も見る

Qframeset要素を使わずに画面を分割したい

アンテナ（下記サイト）のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL：http://www.geocities.jp/eijispace/2012/0419.html

他の回答も見る

Qで文字を右揃えにしたいのですが...(＾-＾；

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね？
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど；

HPタイトル 　　管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです；<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

他の回答も見る

QHTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい

複数のHTMLファイル内で、同じHTMLタグを書く部分がいくつかあります。
それらのHTMLタグの部分を外部ファイルか何かにして、HTMLファイル内で読み込むようにすることは出来ますか？

JavaScriptでは外部ファイル（jsファイル）の読み込みはできるようですが、HTMLではできないんでしょうか？

※尚、CSSではやりたい事は出来ませんでした。
共通化できるのはスタイルだけなので・・。
私が共通化したいのは、HTMLタグです。

例えば

<TD>hogehoge</TD>

や

<IMG src="hoge.jpg">

などのタグを複数のHTMLファイルで共有する為に
外部ファイル化したいんですが
そんなことって出来るのでしょうか・・？

上記のようなタグを複数のHTMLファイルで共通できる手段であれば、外部ファイルという形式じゃなくても別にいいのですが・・

Aベストアンサー

javascriptの外部ファイルで
docuemnt.write("<TD>hogehoge</TD>");
document.write("<IMG src="hoge.jpg">");

他の回答も見る

QjavascriptでiframeのURL変更は？

javascript初心者ですが、あれこれ悩みながらselect（仮にA)、radio（B)、radio（C)から取得したnameに".html"を足すことで、差し替えたいURLを形成することができました。
A,B,Cの選択を　A_B_C.html　という形にして　それをwindow.open または　locationで表示することまではできたのですが、インラインフレームの中にそのURLを表示させたりURLの差し替えをすることができません。
長い間悩みましたが解決できず困っています。

方法をご存知の方がいらっしゃいましたら、ご教授よろしくお願いいたします。




<script type="text/javascript">
<!--
//カラーの取得
function getRadio(colNo){
var col = '';
for(var i = 0; i < colNo.length; i++){
if (colNo[i].checked){
col = colNo[i].value;
break;
}
}
return col;
}

//柄の取得
function getGara(garaNo){
var gara = '';
for(var j = 0; j < garaNo.length; j++){
if (garaNo[j].checked){
gara = garaNo[j].value;
break;
}
}
return gara;
}

function show(url){
var size =document.fm.size.value;
var col = document.fm.col;
var gara = document.fm.gara;
var src = "shohin/";
var url;
var tourl = (src + size + "_" + getRadio(col) + "_" + getGara(gara));

var ifr = document.getElementById("s-box");

if(size==""||col==""||gara==""){
var url = (src+"annai.html");
}

else{
var url = (tourl + ".html");}

ifr.location = url;
}
//-->
</script>
-----------bodyの中--------
<form name="fm"
<select name="size"
<input type="radio" name="col"
<input type="radio" name="gara"

中略

<iframe name="s-box" src=""></iframe>
<input type="button" value="組合せを見る" onClick="show(url)" /></form>

javascript初心者ですが、あれこれ悩みながらselect（仮にA)、radio（B)、radio（C)から取得したnameに".html"を足すことで、差し替えたいURLを形成することができました。
A,B,Cの選択を　A_B_C.html　という形にして　それをwindow.open または　locationで表示することまではできたのですが、インラインフレームの中にそのURLを表示させたりURLの差し替えをすることができません。
長い間悩みましたが解決できず困っています。

方法をご存知の方がいらっしゃいましたら、ご教授よろしくお願いいたします。



...続きを読む

Aベストアンサー

iframeのソースを変更するなら、
iframe.location=url;
ではなく、
iframe.src=url;
ですよ。

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Qhtml で　変数を定義できますか？

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか？

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
　本来はXSLTで作るほうがよいかと・・・
　<th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
　本来はXSLTで作るほうがよいかと・・・
　<th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む

他の回答も見る

QHTMLからフォルダを開きたい

いつも大変お世話になります<(_ _)>

Webサーバー上にあるWebページ(HTML)の中に、ローカルPCのフォルダを開くリンクを付けたいのですが、
<a href="file://c:\windows">OPEN</a>
としても、何も反応しません。

いろいろ調べたのですが、上記の方法しか見あたりません。

なお、ブラウザのアドレス欄に file://c:\windows と入力すると、フォルダの内容が表示されます。
※Firefoxだと、ファイルの一覧になりますが・・・

何か環境によって挙動が異なるのでしょうか？
それとも、セキュリティ上の観点から最近じゃ出来なくなっているのでしょうか？

是非ともお助け下さい。宜しくお願い致します。

Aベストアンサー

file:///C:/windows/
/は三つでは・・・
　IEの場合はエクスプローラ(ファイルマネージャ)が開くような・・・
　IEはファイルマネージャーと一体のブラウザなので・・・

★実は、ローカルサーバーが必要です。
　apacheでも何でも良いので、WEBデータの入っているフォルダーを
<VIRTUALHOST 127.0.0.1>
C:\Document and settings\my document\web
　とかに指定して、Windowsのhostsファイルで、適当なサーバー名を指定しておきます。
myLocalhost 127.0.0.1
とか・・・

　そうすると
http://myLoclahost/
　で開けます。

　

他の回答も見る

Qcssで「下よせ」ってどうやっていますか？

フロートのレフト、ライトはいいとして、

あるボックス要素内（Ａ）に異なるボックス要素（Ｂ）をいれます。
この（Ｂ）を（Ａ）の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか？

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな？

position: absolute;
bottom: 0px;

他の回答も見る

QHTML5 iframe の代わり

HTML5でiframeが認められなくなりました。
今まで下記のように

ボタン１ボタン２ボタン３ボタン４ボタン５ボタン６
<旧iframe></旧iframe>

ボタンは表示し続け下にボタンに応じたページを
表示させたい場合一般的にどうすればよいのでしょうか？
javascriptに頼らざるをえませんでしょうか？
皆様のよきご回答をお待ちしております。

Aベストアンサー

＞<li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう

　ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。
　単純にページ内アンカーに飛んでいるだけです。

　HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」

　しかし、その部分はまったく守られていなかったために、HTML5では、文書構造を示すタグが追加されたにすぎません。！！！！

　ソースを見られてもお分かりのように、スタイルシートを除けば、わかりやすいマークアップがされています。あなたにも検索エンジンにもわかる。

　デザイン、どのように見せるかと、文書構造は独立して考えるべきです。まず、デザインは後回しにして、HTMLの基本をしっかりと学んでください。HTML5はまだ勧告の段階ではありませんから、HTML4.01strictを身につけること。
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
　とか。・・・HTML4.01ですが、HTML5は、HTML4.01strictの改訂版です。transitinalなんて知らなくて良い。

　その後、スタイルシートを学んでください。

＞<li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう

　ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。
　単純にページ内アンカーに飛んでいるだけです。

　HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.a...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報