新規投稿
フォローする

スペースに設置したボタンリンクについて

お世話になります。

スペースへ設置したボタン等にURLを登録したいのですが、

window.open()で設定すると別タブ、

window.location.href =""で設定すると同一タブで遷移します。

 

ブラウザーでクリックする際(通常のクリック)ではページ同じタブに遷移

ctrl+クリック(command+クリック)で別タブで表示で動かしたいのですが

javascriptではこのような指定はできないでしょうか?

 

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

 

 

0

5件のコメント

Avatar
juridon

こんばんは!
例えば、スペースフィールドにhtmlを書き込んで
<a>タグを仕込んでボタン画像をクリックしたら飛ぶようにする

とか

JavaScriptボタンクリックのイベントを使いたい場合は

btn.addEventListener("click", (e) => {
  console.log(e.ctrlKey);
});

こんなかんじでCtrlキーを押したかどうかがtrue/falseで分かるので(Windowsしか無くてmacはわかりませんが💦)
それで分けるとかいかがでしょうか👀
0
Avatar
青山昌司

お世話になっております。

ご返信ありがとうございます!

「e.ctrlKey」 と「e.metaKey」を使って

WindowsOS、MACOS共に思うような処理ができました!

ありがとうございました。

0
Avatar
青山昌司

お世話になっております

一点わからない点が出ました。

下記の方法でポータル画面のヘッダーにボタンを作っているのですが

ボタンをクリックするごとにタブが増殖されていきます。

1回目出ない、2回目1つ開く、3回目2つ開く、4回目3つ開く・・・と。

ご教授のほどよろしくおねがいします。

 


(function(){

if (!$('.gaia-header-toolbar-navigation')) kintone.portal.getContentSpaceElement().append($('<div>').addClass('gaia-header-toolbar-navigation')[0]);

return$('.gaia-header-toolbar-navigation');

})().append($('<button  id="htb001">').addClass('header-toolbar_button').append($('<span>').text("予定表")).on('click',function(e){


document.getElementById('htb001').addEventListener("click", (e) => {

console.log((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey))

if((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)){

console.log((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey))

window.open(url);

}else{

window.location=url;

}
})
return e;
})
);
return event;
});



 
青山昌司により編集されました
0
Avatar
juridon

こんばんは!
クリックイベント、うまく行ったみたいでよかったです!

ボタン増殖についてはチュートリアルの第2回にありますので是非参考にされてみてください!
第2回 レコード一覧画面にボタンを置いてみよう!

あっ!!!スミマセン、タブが増殖ですね読み間違えてました💦



kintoneカスタマイズですが、

即時関数内で直接ヘッダ部分のDOM操作してボタンを置くのではなく、

ポータルのヘッダのカスタマイズをする場合は
ポータル表示イベント

ポータル情報取得
でヘッダ部分のスペースを取得してから↓のような方法でボタンを置くようにしたほうが良いと思いますので是非参考にされてみてください👀
(↓先程貼り付けたリンクと同じものですが)
第2回 レコード一覧画面にボタンを置いてみよう!


juridonにより編集されました
0
Avatar
青山昌司
お世話になっております。
下記の方法でうまくいきました。
ありがとうございました!
 
})().append($('<button  id="htb001">').addClass('header-toolbar_button').append($('<span>').text("予定表")));
 
if (document.getElementById('htb001') !== null) {
document.getElementById('htb001').addEventListener("click", (e) => {
 
console.log((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey))
if((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)){
1
サインインしてコメントを残してください。