オープンソース JavaScript:SmartPopupを公開


 トップページ → アンカーラボ → オープンソース - JavaScript:SmartPopup

アンカーラボ オープンソース

アンカーラボ(アンカー研究室)

(オープンソース) JavaScript: SmartPopup

window.open()を記述せずに別ウィンドウで開く事が出来ます。SEOにも効果があると思われます。
さらに、JavaScriptが利用できない環境では同じウィンドウにhrefのページを開きます。

SmartPopup設置例
横300px,縦300px,スクロール無し→www.google.co.jp 新しいウィンドウで開きます
横100px,縦100px,スクロール有り→www.google.co.jp 新しいウィンドウで開きます
  • デフォルト設定
    onload="smartPopup('width=300px,height=300px,scrollbars=no');"
  • relの値がsmartPopupのみの場合はデフォルト値が適用されます。
    <a href="http://www.google.co.jp" rel="smartPopup">www.google.co.jp</a>
  • relの値がsmartPopup:~の場合は指定した値で上書きされます。
    <a href="http://www.google.co.jp" rel="smartPopup:width=100px,height=100px,scrollbars=yes">www.google.co.jp</a>
設置方法
下記のコードを適切な部分に貼り付けてご利用ください。
※下記の例はJavaScriptファイルの場所がhtmlファイルと同階層の場合です。
※重要な部分は赤文字になっています。
下記のファイルを右クリックから保存でダウンロードしてください。

[ソースコード:smartpopup-1.1.3.js]

<!-- <head>~に記述</head> -->
<script type="text/javascript" src="smartpopup.js"></script>
<!-- <head>~に記述</head> -->

<body onload="smartPopup('width=300px,height=300px,scrollbars=no');">

<!-- <body>~</body> -->
<a href="http://www.google.co.jp" 
  rel="smartPopup">www.google.co.jp</a>|
<a href="http://www.google.co.jp" 
  rel="smartPopup:width=100px,height=100px,scrollbars=yes">www.google.co.jp</a>
<!-- <body>~</body> -->
改版履歴
Ver.1.1.3
[Mod] rel属性のオプション値にname=○○を記述しない場合、IEではエラーになるバグを修正しました。
Ver.1.1.2
[Mod] rel属性のオプション値にname=○○を含める事で個別のWindow名を指定可能にしました。
Ver.1.1.1
[Mod] 第3引数にWindow名を追加しました。
Ver.1.1.0
お問い合せ
バグ・要望のご連絡はこちらへお願い致します。
email:labo@anchor-gr.jp
また、設置方法のアドバイスや設置代行作業(有料)も行っております。お気軽にお問い合せ下さい。

SmartPopupスクリプト仕様

smartPopup(window_open_option, trigger_name, window_name)
a要素のrel属性にtrigger_nameがセットされている場合にhref属性の値を使ってwindow.openを実行します。
パラメータ値 デフォルト値 備考
window_open_option "" 省略可。window.openの第3引数を指定します。この値はデフォルト値として使われます。
trigger_name "smartPopup" 省略可。a要素のrel属性にこの値がセットしてある場合にイベントが発生します。
window_name "wxxxxxxxxxxxx" 省略可。window.openの第2引数を指定します。省略時はランダムな文字列を使用します。
smartPopupAll(window_open_option)
ドキュメント上のa要素全てに適用されます。a要素href属性の値を使ってwindow.openを実行します。
パラメータ値 デフォルト値 備考
window_open_option "" 省略可。window.openの第3引数を指定します。この値はデフォルト値として使われます。
rel属性 rel="name[:option,option,...]"
別窓で開きたいa要素に、rel属性を設定します。
パラメータ値 デフォルト値 備考
name smartPopup 省略可ですが、optionがある場合は省略出来ません。
例)rel="autopopup"
option 無し 省略可。コロン(:)からwindow.openの第3引数を指定します。カンマ区切りで記述します。
Window名を指定する場合は、name=Window名をオプションに含めてください。
例):width=100px,height=300px,name=popupWnd

ご利用条件

  1. アンカーラボで公開している全ては、通常、商用利用をお断りしておりますが、オープンソースの表示がある場合はこの限りではありません。どなたでも自由にご利用が可能です。
    ※ホームページ制作会社(ホームページ制作関連の業者・デザイン会社含む)が自社のページに設置する場合に限り商用ページに設置が可能です
  2. 弊社トップページへのリンクをして頂きます。設置箇所付近又は、設置ページのCopyright付近に目立たないよう小さくでも結構です。
    <a href="http://www.anchor-gr.jp/" title="オープンソース アンカーラボ">Powered by アンカーグループ</a>
    表示例)→ Powered by アンカーグループ
  3. アクセス数があまりにも多い場合は、一時的に制限させて頂く場合がございます。
    ※常時負荷が大きい場合はご相談させて頂きます
  4. 電源メンテナンス・セキュリティアップデート等でサーバを再起動する場合、一時的にアクセスが出来なくなる事があります。
    ※通常3分以内で完了します。長時間のダウンタイムが発生する場合のみ当ホームページで告知致します。
  • 仙台のホームページ制作・WEBシステム開発会社
  • 仙台でホームページ制作なら022-342-1556
  • ホームページ作成、WEB制作は
    仙台市のアンカー!
  • お問合せフォーム
  • EVSSL
  • 無料お見積フォーム
  • ホームページ制作、開発
  • 仙台市内|名取|岩沼|白石
    亘理|大河原|角田|仙南|仙北
    宮城県内お伺い致します。

営業カレンダー

※赤文字は定休日です

2024年3月
12
3456789
10111213141516
17181920212223
24252627282930
31
2024年4月
123456
78910111213
14151617181920
21222324252627
282930