あるAファイル(例えばindex.html)が、今、左右にフレーム分けされているとして、この境界線を動的に移動させることはできるのでしょうかね~(@o@)

なお、Aファイル自体ではなく、子フレーム内にあるB、あるいはCファイルからAファイルの境界線を書きかえる方法を教えていただければ幸いです。
(ようするに、動的に外部からAファイルの表示変える分にはOKですが、Aファイルのソース自体は変えられないということです。)

なお、別の境界線をもつDファイルを用いるという意見は趣旨と違いますのでご遠慮下さい。

お願い致しますm(_ _)m

A 回答 (1件)

フレーム分割を直接書換えられる関数や環境変数は、


Javascriptには無かったと思います。

Aファイルを書き換えられなければ無理な方法ですが…

Aファイルで割り当て比を非表示のフォームとして置いておき、
<form name="form1">
<input type=hidden value="30%" name="x1">
<input type=hidden value="70%" name="x2">
</form>

<script language="javascript">
<!--
a1 = document.form1.x1.value;
b1 = document.form1.x2.value;
document.write("<frameset cols=\""+a1+","+b1+"\">");
document.write("<frame src=\"../hogea.html\">");
document.write("<frame src=\"../hogeb.html\">");
document.write("</frameset>");
//-->
</script>

とFRAMESETを書くようにして、子フレームから
parent.document.form1.x1.value = "50%";
parent.document.form1.x2.value = "50%";
のようにして値を変更し、Aファイルをリロード…

無駄に手間がかかってる気がしますが参考までに(^^;。
    • good
    • 0
この回答へのお礼

お返事ありがとうございます。
ふむふむ…… ほほぅ、なかなか大胆な発想をなさいますね。
今回とは趣旨(Aファイルを書きかえられない)が違いますが、「動的な境界線の移動」は面白い考え方でクリアなさっていますね。

何らかの機会に形を変えて応用できるかもしれません。
ありがとうございました。

他に何か思いつく方がいらっしゃるかもしれないので、もうすこし他の回答をまってみます。

お礼日時:2001/02/16 14:18

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

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

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

Qインラインフレームで組まれたHTMLで子フレームより、親フレームのUR

インラインフレームで組まれたHTMLで子フレームより、親フレームのURLを参照したいです。
parent.locationで参照出来ることは、わかったのですが、サイトの制御がかかっているようで
これは、使えないようです。

サイトは、楽天です。

他に何か方法があればと思うのですが、
ご教授のほど、お願い致します。

Aベストアンサー

楽天に限らず、javascriptで他のサイトのコンテンツにアクセスする事は出来ません。
<iframe>でも<frameset>でもajaxでも不可能です。
どうしても、自サイト内に別途代理応答的な動きをするプログラムが必要です。
楽天の何を取得したいのかわかりませんが、RSS Feedみたいな特定のXMLなら
アクセス用のAPIサービスを提供しているサイトもありますが...
http://code.google.com/intl/ja/apis/ajax/documentation/
http://code.google.com/intl/ja/apis/ajaxlanguage/documentation/
http://developer.yahoo.co.jp/
http://pipes.yahoo.com/poolmmjp/feed_api
http://www.ajax-cross-domain.com/

Q変数を利用して読込先を動的に変えたい

表示しているhtmlファイル名を取得して、動的に参照フォルダを変えるスクリプトを組んでいますが思うように動かず四苦八苦しております。

--------------------------------
/* --- URLからファイル名を取得しfileNameに格納、
          見学報告データフォルダ名指定用として動的に変化させる --- */

var levelUrl = location.href.split("/");
var fileName = levelUrl[levelUrl.length-1].split(".");

// 表示用data.js読込
document.open();
document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>');

// ページ生成シーケンス
document.write ('<h2>',commentList[0][0],'</h2>');   //アルバムタイトル生成
document.write ('<div>',commentList[0][1],'</div>');  //冒頭コメント生成
for (var i = 1 ; i <= commentList[1][0] ; i++){
document.write ('<p class="album"><img src="./topics/',fileName[0],'/',i,'.png" /></p><p class="comment">',commentList[1][i],'</p>');
}
document.write ('<div><p class="thanks">ご来訪のお礼</p>',commentList[0][2],'</div>');//締めのコメント生成
document.close();
-----------------------

この内容を外部ファイル(album.js)として保存し[例]20140623_2htmlページ内で読み込みデバッグツールで確認するとalbum.jsを読み込んだ後に./topics/2014062_2/data.jsも読み込み、中身も正常に確認できましたが、album.jsの後に読み込まれているためか変数を利用できず?真っ白なページとなりました。
そこで、冒頭からコメントの「ページ生成シーケンス」前までを20140623.htmlのalbum.js読み込み直前に直接記載したところ、何故か
document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>');
の行がhtmlタグの書き出しとして機能せず、最後のシングルクォーテーション以降がページ内にテキストとして表示されました。
具体的な表示としてはページ内に
'); document.close();
が表示され、一つのwrite文として機能していないためdata.jsファイルの読込も出来ない状態になりました。

外部ファイルにするか直書きにするかで動作が変わるため何が原因か分からず困っています。
なお、当方が目的としているのは見学報告のページに表示するコメントを収めた配列をhtmlファイルのファイル名に応じて動的に変化させたい事ですので、私が書いたフォルダ名を動的に変化させる方法のミス部分の指摘でも、変数名を動的に変化させる方法(元々これを実現しようと思っていましたが能力不足で出来ませんでしたorz)具体的には20140623.htmlのファイル内では配列data20140623の中身を参照するといった方法でも構いません。

よろしくお願い致します。

表示しているhtmlファイル名を取得して、動的に参照フォルダを変えるスクリプトを組んでいますが思うように動かず四苦八苦しております。

--------------------------------
/* --- URLからファイル名を取得しfileNameに格納、
          見学報告データフォルダ名指定用として動的に変化させる --- */

var levelUrl = location.href.split("/");
var fileName = levelUrl[levelUrl.length-1].split(".");

// 表示用data.js読込
document.open();
document.write ('<script type="text/javascript" s...続きを読む

Aベストアンサー

ANo2です。

>ご指摘通りhtmlファイルが複数出来ますが私のスキルの限界でhtml
>のファイル名を決めるだけで中身に手を入れず、ファイル名と同じ
>フォルダを用意し中に1~のpngファイルとdata.jsを放り込むだけ
>でページ作成が可能になるように考えた結果であります
サーバサイドのプログラムは使わないにしても、ANo2でも書きましたように、HTMLファイルを複数作成しなくても良いのではないでしょうか?
 hogehoge.html?date=20140623
のようなアクセス方法が可能であれば、HTMLファイルは一つのものですむと思います。
ご質問でご提示の方法で「HTMLファイル名(URL)から参照データを作成する」部分を「URLのクエリ部から参照データを作成する」といったように変えればあとは同じで済むと思います。
後者はlocation.searchから取得することが可能ですし、データファイル名を作成した後はまったく同じ処理で済むと思います。


>理想は、data.jsに該当する物は一つで配列名を可変出来れば・・・
>もっとシンプルになるのですが
このイメージがどのようなものなのかよくわかりませんが、dataファイルが一つということは全情報が1ファイルになっているということでしょうか?
無理やりやるなら、
 window["fuga"]
で、グローバル変数fugaにアクセスができるので、できないことはないと思いますが、document.writeと同様お勧めはできません。(グローバル変数に限っています)

変数名を変えたいような場合の解決法の一つとして、変数を配列にしておいてそのindexを変えることで対応可能かと思います。(変数名は固定、indexが可変)
(ご提示の変数がすでに配列ですので、配列を配列化することになります)
それによって、indexを渡せばそれに応じたデータを取得することが可能になります。

でも、1ファイルにある全てのデータを一旦読み込んでから、その(ごく)一部のみを利用するのでは、無駄な通信を増やすことになりませんか?
その意味からも、データは別ファイルにしてあるほうが宜しそうな気がしますが…


>ちなみに、メニューのスクロール機能のためにajax?は利用していますが~~
であれば、その関数を利用することでデータファイルの形式もかなり自由にできますね。
実行順序の制御も、コールバックを利用することで確実になります。

まぁ、このあたりはデータをどのように作成しているかやそのデータを他に利用しているかといったことも関係してきますので、ご質問の文章だけでは判断はできませんが…

ANo2です。

>ご指摘通りhtmlファイルが複数出来ますが私のスキルの限界でhtml
>のファイル名を決めるだけで中身に手を入れず、ファイル名と同じ
>フォルダを用意し中に1~のpngファイルとdata.jsを放り込むだけ
>でページ作成が可能になるように考えた結果であります
サーバサイドのプログラムは使わないにしても、ANo2でも書きましたように、HTMLファイルを複数作成しなくても良いのではないでしょうか?
 hogehoge.html?date=20140623
のようなアクセス方法が可能であれば、HTMLファイルは一つのものです...続きを読む

Q動的 aタグ リンク制御

http://bit.ly/b9owF1

ECサイトを運営しております。
上記サイトの右側にありますソート機能の様に、Javasctipt でリンクの制御をしたいと思いっています。
※上記サイトはサンプルです。

上記のサイトですと、「メーカー順 | 商品名順 | 価格順」とあり、
価格順でソートされている状態では、価格順が太字 & リンク解除となります。

他のリンクも同様に、クリックされてソートされている並び方のリンクが解除され太文字になります。


これを Javascript で実装したいと思っています。

※HTML は同一のものを使用するので、動的に変化する事が望ましいです。
※それぞれの URL はユニークなものになっています。
※ URL にパラメーター(&sort=xxx)を加える形になります。

お知恵をご拝借ください。
何卒、宜しくお願い申し上げます。

Aベストアンサー

ごめんなさいね、まじめサンプルに書くと
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>test</title>
<script type="text/javascript">
<!--
function chgstyle(e){
var brothers = e.parentNode.childNodes;
for (var i=0;i<brothers.length;i++){
if(brothers[i].nodeType==1){
if(brothers[i] != e){
   brothers[i].style.fontWeight = 'normal';
}else{
   brothers[i].style.fontWeight = 'bold';
}
}
}
}
// -->
</script>
</head>
<body>
<div>
<a href="about:blank" target="frame1" onclick="chgstyle(this)">hoge1</a>
<a href="about:blank" target="frame1" onclick="chgstyle(this)">hoge2</a>
<a href="about:blank" target="frame1" onclick="chgstyle(this)">hoge3</a>
</div>
<iframe name="frame1"></iframe>
</body>
</html>
こんな感じです。

ごめんなさいね、まじめサンプルに書くと
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>test</title>
<script type="text/javascript">
<!--
function chgstyle(e){
var brothers = e.parentNode.childNodes;
for (var i=0;i<brothers.length;i++){
if(brothers[i].nodeType==1){
if(brothers[i] != e){
   brothers[i].s...続きを読む

Q【javascript で動的に a タグ内に onclick属性を出力する方法】 について

javascript での 【 html 内への動的タグ生成】について、
javascript にご理解のある方にお教え頂けますと大変嬉しです。

かなり基本的なことで恐縮ですが、当方デザインサイドの人間で
javascript も理屈の情報流し読みだけで、全く自ら書く練習をしていない不理解者です。

それでも急ぎで解決してゆきたい問題があり。

どなた様か、何卒宜しくお願い申し上げます。

----------------------------------------------------------------
作ろうとしているのは、【現在の Yahoo JAPAN! のTOPページ上部の、ページURLを切り替えずにタブをチェンジして、それに対応する下部の div の内容を切り替える】というインターフェイスです。

ただ、IE5.5 などで全くまともに動作しないので、IE5.5を含んだクロスブラウザ対応のため、【Ajax ライブラリのタブチェンジ】ではなく、巷の情報をアレンジした自前 javascript で作っています。

以下のようなタグを javascript で動的に生成する記述を書いているのですが、これが 【現在の Yahoo JAPAN! TOP】の上部クリック切替タブに相当するものです。

<ul class="menu1" id="nav">
<li id="menu1Nav"><a href="#menu1">メニュー1</a></li>
<li id="menu2Nav"><a href="#menu2">メニュー2</a></li>
<li id="menu3Nav"><a href="#menu3">メニュー3</a></li>
<li id="menu4Nav"><a href="#menu4">メニュー4</a></li>
<li id="menu5Nav"><a href="#menu5">メニュー5</a></li>
</ul>

書く <li><a></a><li> は、CSS 側の記述で display:block; 化して 幅×高さ を統一するように指定しており、クリックした際は「ボタン」的な長方形の outline が【点線】で表示されます。

------------------------------------------------------
そのタブを動的生成する関連メソッドが、

function createListItem(id,href,text) {
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(text);
li.setAttribute('id',id);
a.setAttribute('href',href);
a.appendChild(t);
li.appendChild(a);
return li;
}


function setTabClick(listName,categoryName) {
var e = document.getElementById(listName).getElementsByTagName('a')[0];
e.onclick = function(){
showCategory(categoryName);
return false;
};
}

です。

------------------------------------------------------
このとき【Yahoo JAPAN! TOP 切替タブ】は、クリックした際に outline の【点線】が全く表示されないのでスマートですが、
CSS 側で 当該 li a タグに outline:none; を指定していても、
IE8 や firefox などモダンブラウザではそれだけで「クリック時の周囲【点線】」が見えなくなりますが、

まだシェアの多い IE6/IE7 などでは outline プロパティに対応していないため、クリックしてタブを切り替えたときに、見苦しい【周囲枠点線】が残ってしまいます。

そこで巷の情報より、<a onfcus="this.blur()" id"~">テキスト</a> を挿入すれば、それが見えなくなるとのことで、この動的に生成する <li><a> の a タグの中に onfcus="this.blur()" を常に入れるようにして試してみたいのですが、

★ <a href="#menu1"> などのラスト部分に、毎回同様にうまく挿入する記述方法について、教えて頂けますと大変幸いです。

上の2つのメソッドのどちらかで、その部分の追加記述ができると嬉しいのですが、a.setAttribute(); / e.onfocus = などで少し試してみるも、元々記述構造をよく理解していないため、意図する結果は得られません。

------------------------------------------------------
【上記の onfcus="this.blur()" を 各 a タグの最後に動的に毎回追加する記述方法】 のみで良いのですが、どなた様かお知恵をお借りできませんでしょうか。

自分で長時間試行錯誤する余裕が全くなく、もし早めにコメントを頂けますと大変幸いです。

どうぞ宜しくお願い申し上げます。

javascript での 【 html 内への動的タグ生成】について、
javascript にご理解のある方にお教え頂けますと大変嬉しです。

かなり基本的なことで恐縮ですが、当方デザインサイドの人間で
javascript も理屈の情報流し読みだけで、全く自ら書く練習をしていない不理解者です。

それでも急ぎで解決してゆきたい問題があり。

どなた様か、何卒宜しくお願い申し上げます。

----------------------------------------------------------------
作ろうとしているのは、【現在の Yahoo JAPAN! のTOPページ...続きを読む

Aベストアンサー

>function clickHandler( evt ) {} メソッドを作って、
><ul id="nav"> のラストに onclick="clickHandler( event );"を出すように書ければよりスマートかと思いますが、そもそも <ul id="nav">の後に都合よく onclick="clickHandler( event );" などを出す関数記述が innerHtml なのか何が良いのか良く分かりません。


リスナ登録するだけです。
//@cc_on
function setTabClick( ) {
 var ul = document.getElementById( 'nav' );
 ul./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', clickHandler, false );
}

もともとのソースの a に onclick を登録してる部分を、ul に変えるだけです。
上記で eventTarget.onclick を使わないのは、リークを避けるため、意図しない上書きを避けるため等々です。

# ul につけるのが無理な場合はさらに上位でもいいです。(最上位の document に付けるようにすると、load を待つ必要もなくなります。)
# スクリプトをドキュメントの一番下に置くことでも、onload の必要性をなくすことができ、さらにページの読み込みの妨げも緩和されます。

> Netscape 7.1 でも、、、
Netscape は target にバグがあるので、#3 のままでは動作しないかもしれません。

function clickHandler( evt ) {
 var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
 target.nodeType == 3 && ( target = target.parentNode );
 if( target.tagName == 'A' && /#/.test( target.href ) ) {
  showCategory( target.href.split( '#' )[1] );
  //target.blur( );
  evt./*@if(1) returnValue = false; @else@*/ preventDefault( ); /*@end@*/
 }
}

のように修正してください。
#ついでにその他もろもろも修正


function createListItem(id,href,text) {
 var li = document.createElement( 'LI' );

 li.id = id;
 li.innerHTML = '<a href="'+href+'"'/*@+' hidefocus="true"'@*/+'>'+text+'</a>';
 return li;
}

#DOMって、ツリーを切り取って部分的に扱うには便利だけど、一個一個追加するときは不便。DOCTYPE に影響するところでもないし、この場合はinnerで片付けたほうがすっきりする

# ここの掲示板、スペースが消されてしまうので。全角スペースでインデントが入れてあります、コピーするときは、半角などに置換してください。

>function clickHandler( evt ) {} メソッドを作って、
><ul id="nav"> のラストに onclick="clickHandler( event );"を出すように書ければよりスマートかと思いますが、そもそも <ul id="nav">の後に都合よく onclick="clickHandler( event );" などを出す関数記述が innerHtml なのか何が良いのか良く分かりません。


リスナ登録するだけです。
//@cc_on
function setTabClick( ) {
 var ul = document.getElementById( 'nav' );
 ul./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@en...続きを読む

Q同時にフレームの背景色を変える

http://www2s.biglobe.ne.jp/~club_tom/で配布されている背景 No.1.1(http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no1_1/ha-no1_1.htm)を使用しています。
2分割つしたフレーム(AとB)のAフレームに上記のスクリプトを設置し、カラーパレットクリックでAとBのフレームの背景色を変更したいと思っているのですが、カスタム方法が解りません。御教示頂けると助かります。

または、カラーパレット(のようなもの)をクリックで、複数のフレームの背景色を変更出来るスクリプトをさがしています。宜しくお願い致します。

Aベストアンサー

Bのフレーム名が frameB だとして
ご呈示のページ内スクリプトの以下の部分に追加

//背景色変更部分です
function chaBgHa11(bgCo) {
document.bgColor=bgCo;
parent.frames['frameB'].document.bgColor = bgCo;// 追加
}

フレームがもっとあるなら、frames['frameB']のところを、それに応じて書き換えた行を追加。
ただし、全てのページが同じサーバー上のページでないと、アクセス違反が発生しますのでご注意ください。


人気Q&Aランキング

おすすめ情報