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

Blog

ブログ

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

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担当者の方は、トライムまでお気軽にご相談ください。

    ※複数選択可
    ※同業のWeb制作会社、フリーランスの方へ:下請けの依頼、下請けでの制作は一切行っておりませんので、ご連絡はお控えください。

    ※フルネームでご記入ください。

    ※フォーム経由でお問い合わせを頂いた際には電話ではなく、メールにてご連絡いたします。

    プライバシーポリシーに同意します

    Keyword

    Contact

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

    Contact

    お問い合わせ

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

    TEL

    03-6403-3259

    受付:10:00 - 19:00