JavaScriptのlocation.hrefでリンクを別窓で開くようにしたらあるブラウザで開かなかった|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

JavaScriptのlocation.hrefでリンクを別窓で開くようにしたらあるブラウザで開かなかった

2018.10.03

こんにちは、モトです。

今回JavaScriptでリンクを別窓で開く必要があり、調べて実装してみましたが、
スマホのLINEアプリのブラウザでは開かず失敗してしまったことを書きます。

今回やりたかったことは、

要素をクリックした時に、同じページ内にあるリンクを別窓で開く。

aタグで同じリンクを貼ってtarget=”_blank”をつければ簡単なのでは?と思いますが、
今回はリンクがJSで後から付与されたものでしたので、JSで実装する必要がありました。
普段使わなかったのでネットで調べ、下記の方法を選択しました。

$(".link1").on("click", function() {

let href=$(".link2 a").attr("href");

window.open().location.href=href;

});

単純にlink1をクリックした時、link2のURLを取得し、そのリンクを別窓で表示させる、というものです。

しかし、こちらの方法では他のブラウザでは問題ありませんでしたが、
スマホのLINEアプリでは「about://(null)」と表示され、リンク先を表示することができませんでした。

検証環境
iphone8 iOS 11.4
LINEアプリ 8.5.2

$(".link1").on("click", function() {

let href=$(".link2 a").attr("href");

window.open(href, "_blank");

});

検証の結果、上記の方法にすると無事表示されました!
調べてみますと上記が一般的な方法のようです。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00