Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】リンクボタン

 どうも!LSSです!!

 

【CSS】跳ねるボール【多重アニメーションの実験】 - Little Strange Software

に、さじさんからいただいたコメント、

 

さじ(id:conasaji)

円を足しつつ、タイミングずらしたら不思議な何かができそうです。(何かはわからないw)
昨日ちょっと知りたいことがありましてCSSはてなでググったらLSSさんの記事とフジグチさんの記事がヒットしました(笑)本文にリンクのボタンを入れたいんですが、そんな記事ありませんでしたっけ?

 

CSS装飾でボタン風に見せかける、ような事はよくやっていましたが、本物(?)のボタン(ここではフォームパーツとしてのボタン、の意)はあまり使っていなかった(コード生成ツール等で機能を割り当てるぐらい)ので、あまり難しいものではありませんがひとつ「リンクボタン」を記事にしてみます。

 

…と、考えた時には、またも はてなブログの仕様に悩まされるとは思っていなかったのでしたw

 

 

はてなブログには書けないコード

本文中にこうしてを入れ、押すと他のページが開きます。せんw

 

コード

本文中にこうして<input type="button" value="ボタン" onclick="window.open('https://little-strange.hatenablog.com/');"/>を入れ、押すと他のページが開きます。

青文字部分は好きな文章に、オレンジ文字部分は飛び先のURLに書き換えます。

 

 

はい。

いきなりはてなブログでは書けないコード」例です。

本来であればこのコードで「ボタンを押すと指定のURLを別タブで開く」という動作になります。

 

その「ボタンを押すと指定のURLを別タブで開く」を担っているのは、

onclick="window.open('https://little-strange.hatenablog.com/');"

の部分なのですが、はてなブログでinputタグにonclickオプションを書くと、なぜかバッサリ削除されてしまうんですね^^;

 

 

はてなブログでも書けるコード

本文中にこうしてを入れ、押すと他のページが開きます。

 

コード

本文中にこうして<input id="link01" type="button" value="ボタン" />を入れ、押すと他のページが開きます。
<script>
document.getElementById('link01').addEventListener('click',()=>{window.open('https://little-strange.hatenablog.com/');},false);
</script>

オレンジ文字部分は任意のidで、好きに書き換える事ができます。

 

はてなブログで書ける・動作するようにコードを書くと、↑このようになります。

inputタグ内にスクリプトを書く事を諦め、別途<script>タグ内にイベントリスナーを仕掛けた形ですね。

 

コードは長くなり、固有のidを割り当てる必要が出てきましたが、これなら はてなブログ上でも問題なく動作します。

 

 

リンクの代用となるスクリプト

今回は、

window.open('飛び先のURL');

というのを使用しました。

これは別タブで指定したURLのページを開くものですが、もし「同じタブで飛び先に移動したい」場合には、

location.href='飛び先のURL';

に置き換える事で、新たにタブを開く事なくページ移動します。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^