むずむずサイト製作:凝ったきれいなブログのコツ

ホームページ、ブログの作成について。PHP、CSS、JavaScripoなどを用いた設定。またホームページ作りに便利なフリーソフトなども紹介。

スポンサーサイト

一定期間更新がないため広告を表示しています

| - | - | - | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - スポンサーサイト
JavaScript:DOMでmeta タグを挿入してみる

DOMでmeta タグを入れる場合、

次のように書けばうまくいきました。

 

<script type="text/javascript"><!--

var meta = document.createElement("meta");

meta.setAttribute("name", "google-site-verification");

meta.setAttribute("content","******");

document.getElementsByTagName("head")[0].appendChild(meta);

document.write("269g");

//-->

</script>

 

次のようになります。

DOM Inspector で確認すると、

うまく挿入できているか分かります。

 

 

なぜこんなことをしようと思ったかというと、

head部分を書き換えられない無料ブログで

google ウェブマスターツールの認証を行おうと考えたからでした。

 

うまくいきませんでしたが。

まぁ、当然ですね。

| comments(0) | trackbacks(1) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:DOMでmeta タグを挿入してみる
JavaScript:DOMを表示

Firefox 限定の方法があるようです。

「id="aaa"」の構造を見るときは、

次のように書きます。

 

構造
<div id="aaa">
・・・・・・・
</div>
 
ソース(Firefox限定)
var serializer = new XMLSerializer();
alert( serializer.serializeToString( document.getElementById('aaa') ) );

 

使ってみましたが、Firebug で

一つ一つ確認する必要もなく、

便利でした。

 

また、JSON形式でdump する場合は、

JKL.Dumper を使うといいようです。

こちらからダウンロードできます。

IE6、Firefox、Opera で動作確認済みのようです。

 

次のサイトを参考にしました。

 

DOMオブジェクトをダンプ(テキスト表示)する

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:DOMを表示
JavaScript:DOM で Google Adsense を希望の場所に挿入する

CSSとJavaScriptしか使えない無料ブログでも、

Google Adsense を希望の場所にいれることができます。

この場合、ポイントがいくつかあります。

 

・Google Adsense はタグの改変は不可なので、
 そのまま貼り付ける必要がある。
・タイトルの真下にGoogle Adsense を入れるのは
 規約に反する。
・1ページに、Google Adsense は3つしか入れれない。
・DOMのせいでページ表示を妨げないようにする。
・Google Adsense は iframe で表示されるので、
 cloneNode でコピーできない。
・Google Adsense は iframe で表示されるので、
 appendChild や replaceChild で貼りつけできない(?)
・記事本文の直後に入れる方が、クリック率が高い。

 

今回は、

既にGoogle Adsense を2つ設置している状態で、

新たにもう一つのGoogle Adsense を設置します。

 

次のような手順で行うことができます。

 

1.最下部に、非表示の<div id="aaa">を作り、
  Google Adsense のタグを入れて仮設置する。
2.Google Adsense を入れたい場所
  (例えば<div id="xxx">の後)に、
  createElement で<div ="bbb">を入れる。
3.<div id="aaa">の中の
  Google Adsense のタグを
  innerHTMLでコピー。
4.<div id="aaa">をGoogle Adsense ごと削除。
5.Google Adsense のタグを、
  innerHTML で<div id="xxx">に挿入する。

 

ソースは、例えば次のようになります。

 

ソース
<div id="aaa">
【google Adsense のソースを貼りつけ】
</div>
<script type="text/javascript"><!--
var bbbNode=document.createElement('div');
bbbNode.id = 'bbb';
document.getElementById('xxx').appendChild(aaaNode);
var aaaNode=document.getElementById('aaa');
var str = aaaNode.innerHTML;
aaaNode.parentNode.removeChild(aaaNode);
document.getElementById('xxx').innerHTML = str;
//-->
</script>

 

このやり方なら、

Firefox3.5、IE6、Opera、Safari、Google Chrome の

全てに対応できます。

 

ただし、Google Adsense の規約や、

無料ブログの規約に明確に反していないかは不明なので、

自己責任でお願いします。

 

Google Adsense については、

次のサイトを参考にしました。

 

Google Adsenseを始めてみた - atl*weblog
objectで外部HTML(google adsense javascript)

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:DOM で Google Adsense を希望の場所に挿入する
JavaScript:属性の削除

属性の削除をする場合、

removeAttribute」か、

attributes.removeNamedItem」を使います。

 

ただし、

「attributes.removeNamedItem」は、

IE6では使えないようです。

 

例えば、非表示の部分を表示に変えたい場合、

次のようになります。

 

変更前
<div id="aaa" style="display:none;">
消えてるよ
</div>
 
変更後
<div id="aaa">
消えてるよ
</div>
 
クロスブラウザ対応
document.getElementById('aaa').removeAttribute('style');
 
IE以外のブラウザ対応
document.getElementById('aaa').attributes.removeNamedItem('style');

 

次のサイトを参考にしました。

 

[javascript]DOM:ノードへのアクセス
DOM Samples /Core Node/attributes

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:属性の削除
JavaScript:階層のあるタグを作る方法

主に2つあるようです。

一つは、innerHTML を使う方法、もう一つはappendChild で

くっつけていく方法です。

 

見本
<div id ="xxx">
<div id="aaa">
<div id="bbb" style="text-align:center;">
</div>
</div>
</div>
 
innerHTMLを使う方法
document.getEmelentId("xxx").innerHTML =''
+'<div id="aaa">'
+'<div id="bbb" style="text-align:center;">'
+'</div>'
+'</div>';
 
appendChild を使う方法
var aaaNode = document.createElement('div');
aaaNode.id='aaa';
var bbbNode = document.createElement('div');
bbbNode.style.textAlign='center';
bbbNode.id='bbb';
aaaNode.appendChild('bbbNode');
xxxNode.appendChild('aaaNode');

 

innerHTML を使う方が簡単なよう。

 

style の設定は、

「setAttribute('style', '****');」

で行うと、

Firefox 以外で設定されないよう。

そのため、個別に指定していく必要があります。

多いと大変です。

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:階層のあるタグを作る方法
JavaScript:DOMでstyleの設定

DOMでのstyle の設定の仕方は、2つの方法があるようです。

(その他、createAttribute を用いる方法も?)

ただし、IEとFirefox で、若干挙動が違う場合があるようです。

 

例えば、「<div id="a">」に、「style="align:top;"」

を設定する場合、次のようなやり方があります。

 

クロスブラウザ対応
document.getElementById('a').style.align='top';
 
IE以外のブラウザ対応
document.getElementById('a').setAttribute('style', 'align:top');

 

結果
<div id="a" style="align:top;">

 

「setAttribute('style','******;');」

のように設定した場合、

Firefox ではOKでしたが、IEでは反映されませんでした。

  

「style.****=" ";」は、

全てのブラウザで反映されました。

 

次のサイトが参考になります。

 

IE の getAttribute / setAttribute: Days on the Moon 
一つの関数で画像や色を変更するには? - 教えて!goo
DOMで属性を変更する
DOM Samples /Core Node/attributes

 

各種スタイルについては、次のサイトが参考になります。

IE8の公式サイトです。

 

プロパティ(IE8)

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:DOMでstyleの設定
JavaScript:DOM の要素作成や指定の例

いくつかの例を、

他のサイトから抜き出してみます。

 

<div>あいうえお</div>
var ele = document.createElement("div");
var str = document.createTextNode("あいうえお");
ele.appendChild(str);
 
<img alt="写真" src="./img/bg01.gif"/>(末尾半角空白はなし?)
var ele = document.createElement("img");
ele.setAttribute("src", "./img/bg01.gif");
ele.setAttribute("alt", "写真");
 
<a href="./index.html">[BACK]</a>
var ele = document.createElement("a");
ele.href = "./index.html";
var str = document.createTextNode("[BACK]");
ele.appendChild(str);
 
<select></select>内の<option value="Osaka">大阪</option>
var ele = document.createElement("option");
ele.value = "Osaka";
var str = document.createTextNode("大阪");
ele.appendChild(str);
 
<opiton value="Osaka">大阪</option>を二番目に追加
var insert = 2; // 一番上は0
var ele = document.createElement("option");
ele.value = "Osaka";
var str = document.createTextNode("大阪");
ele.appendChild(str);
ele.insertBefore(ele, obj.options[insert]);
 
<div id="Osaka" style="red">大阪</div>
var ele = document.createElement('div');
ele.id = "id";
ele.innerHTML = "hogehoge";
ele.style.backgroundColor = 'red';
 
<li>大阪</li>
var ele = document.createElement("LI");//大文字のよう
var str = document.createTextNode("大阪");
ele.appendChild(str);
 
id=Osaka の場所に、「大阪」を追加
var strj = document.createTextNode("大阪");
document.getElementById("Osaka").appendChild(str);
 
<head>へのJavaScript の追加?
var script = document.createElement("script");
script.setAttribute("src", url);
script.setAttribute("type", "text/javascript");
script.setAttribute("id", trans.scriptId);
document.getElementsByTagName("head")[0].appendChild(script);
 
<body>タグの指定?
var ele = document.getElementsByTagName("body").item(0);

 

次のサイトを参考にしました。

 

element.appendChild - 指定要素へ子要素追加
要素の追加 (append)
appendChild() - JavaScript / DOM
Ext.ux.JsonpTreeLoaderとサンプル [Archive]
document.createElement - 指定タグでのエレメント作成

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:DOM の要素作成や指定の例
JavaScript:setInterval を使って特定の条件が揃うまで待つ

setInterval を使うことにより、

特定の条件が揃うまで実行を休止させることができます。

 

例えば、次のような場合のような処理もできます。

 

1.<div id="aaa"></div>の中に
  何かが表示されるまで3秒ごとに監視する。
2.何かが表示されたら、アラートを表示する。

 

ソースは次のようになります。

  

ソース

var tID1=setInterval("xxx()",3000); 
function xxx() {
if ((document.getElementById('aaa').firstChild)) {
alert('<div id="aaa">の中に何か表示されました');
clearInterval(tID1);
return;
}
}

 

また、次のようにすることで、

順々に処理を実行することも可能です。

 
ソース
var mode=1;
 
// 1つめの監視
var tID1=setInterval("xxx()",3000);
 
//2つめの監視
var tID2=setInterval("yyy()",3000);
 
function xxx() {
if (【2番目の処理に移る条件】)) {
【1番目の処理】
mode=2;
clearInterval(tID1);
return;
}else{
【条件以外のときし続けたい処理があればここ】;
}
}
 
function yyy(){
if(mode==2){
【2番目の処理】
clearInterval(tID2);
}
}

 

こうすることにより、

確実に1番目、2番目・・・、と、

処理を実行していくことができます。

 

次のサイトを参考にしました。

  

JavaScriptのsetTimeout()で処理終了まで待ちたい【見本に】
JavaScriptのタイマーとクロック操作【分かりやすい】
setIntervalとsetTimeoutの使い分けがわからない
JavaScript には Sleep や Wait のような仕組みはありません。
JavaScript : setInterval【タイトルはsetTimeout】
JavaScript : setTimeout
setTimeoutを使って・・・・。 - 教えて!goo
JavaScript/Sleep,Waitの実装
 
誤解されがちな setTimeout 系の概念
setTimeoutの実行は、functionの評価が終わって

| comments(1) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:setInterval を使って特定の条件が揃うまで待つ
JavaScript:iframe の中をコピーして貼り付け方法(クロスブラウザ対応)

こちらの方法で試してみたんですが、

IE、Opera、Safari、GoogleChrome で成功。

 

しかしどうしてもFirefox で、

最後に貼り付けるところ(appendChildの部分)で

エラーが出ました。

試行錯誤で試してみた結果、

次の方法で、全てのブラウザでうまく表示されました。

 

変更前
<div id="aaa"></div>
・・・
<div id="bbb"><iframe>・・・</iframe></div>
 
変更後
<div id="aaa"><iframe>・・・</iframe></div>
・・・
(<div id ="bbb"></div> は消去)
 
ソース
// ノードを取得
var ele = document.getElementById('bbb');
// そのノードの中味を文字列としてコピー
var str = ele.innerHTML;
// <div id="bbb">を消去
ele.parentNode.removeChild(ele);
// appendChild でなく innerHTML を使う
document.getElementById('aaa').innerHTML= str;

 

appendChild や replaceChild で貼り付けようとすると、

Firefox でのみエラーが出ます。

 

そのため、appendChild のようにしたい場合は、

先にcreateElement と appendChild で場所を作り、

そこにinnerHTML で挿入するとうまくいくと思います。

 

IE6、Firefox3.5、Opera、Safari、Google Chrome で

動作確認済みです。

 

次のサイトなどを参考にしました。

 

iframe内のDOM要素を別フレームにコピー
JavaScriptとiframeで、Googleイメージ検索
javascriptでIEが落ちる。
Re^5: データの動的作成

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:iframe の中をコピーして貼り付け方法(クロスブラウザ対応)
JavaScript:innerHTML の IE と Firefox の挙動の違い

IE と Firefox では若干挙動が違うよう。

次のようになっています。

 

IEでの挙動
・タグ名は大文字になる。
 例)DIV、A、IMG
・タグの属性は小文字になる
 例)href、src などの属性
・id の属性値の「"」が消える(他の属性値の「"」はOK)
 例)id=hogehoge
 例)scr="http://hogehoge.html"
・テキスト部の最初の半角空白が削除される(?)
 
Firefoxでの挙動
・タグ名は小文字になる。
 例)div、a、img
・タグの属性は小文字になる(IEと一緒)
 例)href、src などの属性
・id の属性値の「"」は消えない
 例)id="hogehoge"
 例)scr="http://hogehoge.html"
・テキスト部の最初の半角空白が削除される(?)

 

次のサイトをまとめました。

 

innerHTMLとか(IEとFireFoxの差異)

| comments(0) | trackbacks(0) | サイト作り:JavaScript | TOP↑ | このエントリーを含むはてなブックマーク はてなブックマーク - JavaScript:innerHTML の IE と Firefox の挙動の違い