質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1231閲覧

jQueryの.loadで読み込んだhtml(ヘッダー)にJavaScriptで暗号化したメールリンクを貼りたいけどうまく表示されない

ganeru

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/12/25 07:13

前提・実現したいこと

jQueryの.loadで読み込んだheader.html内にメールアドレス暗号化(メール暗号化ツール)で作成したmailtoリンクを貼りたい

発生している問題・エラーメッセージ

理想の表示:

(サイトのロゴ) ・コンテンツA ・コンテンツB ・コンテンツC ・コンテンツD ・コンテンツE ・コンテンツF ・メール

実際:

メール

↑メールリンクだけ表示されてしまう

該当のソースコード

index.html:

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> 4~略~ 5 <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> 6 <script> 7 $(function() { 8 $("#header").load("header.html"); 9 }); 10 </script> 11~略~ 12 </head> 13 <body> 14 <header id="header"></header> 15 <main> 16~略~ 17 </main> 18 </body> 19</html>

header.html:

html

1<header id="header"> 2 <a class="logo" href="#">サイト名</a> 3 <div id="nav-drawer"> 4 <input id="nav-input" type="checkbox" class="nav-unshown"> 5 <label id="nav-open" for="nav-input"><span></span></label> 6 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 7 <ul class="header-list"> 8 <li><a href="#">コンテンツA</a></li> 9 <li><a href="#">コンテンツB</a></li> 10 <li><a href="#">コンテンツC</a></li> 11 <li><a href="#">コンテンツD</a></li> 12 <li><a href="#">コンテンツE</a></li> 13 <li><a href="#">コンテンツF</a></li> 14 <li><script type="text/javascript"> 15<!-- 16function converter(M){ 17var str="", str_as=""; 18for(var i=0;i<M.length;i++){ 19str_as = M.charCodeAt(i); 20str += String.fromCharCode(str_as + 1); 21} 22return str; 23} 24function mail_to(k_1,k_2) 25{eval(String.fromCharCode(108,111,99,97,116,105,111,110,46,104,114,101,102,32, 2661,32,39,109,97,105,108,116,111,58) 27+ escape(k_1) + 28converter(String.fromCharCode(115,100,114,115,63,115,100,114,115,45,105,111, 2962,114,116,97,105,100,98,115,60)) 30+ escape(k_2) + "'");} 31document.write('<a href=JavaScript:mail_to("","")>メール</a>'); 32//--> 33</script></li> 34 </ul> 35 </div> 36</header>

試したこと

【jquery】.loadした部分にjsを効かせる方法(getScript)を参考に暗号化スクリプト部分をjsファイルにして読み込んでみたけど同じ結果になった
ヘッダーをPHPに変えたらできるかもしれないと思って試したがサーバーがPHPに対応しておらず不可能だった

補足情報(FW/ツールのバージョンなど)

当方HTML&CSSの浅い知識しかなく、jQuery&JavaScriptはほぼ分かりません。
ネットで検索して出たやり方をそのまま真似してヘッダー部分を共通化したサイトを作りました。
メールリンクは貼りたいけど迷惑メールが来ないように暗号化して貼りたいです。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
header.html:

html

1<header id="header"> 2 <script type="text/javascript"> 3 function converter(M){ 4 var str="", str_as=""; 5 for(var i=0;i<M.length;i++){ 6 str_as = M.charCodeAt(i); 7 str += String.fromCharCode(str_as + 1); 8 } 9 return str; 10 } 11 function mail_to(k_1,k_2) 12 {eval(String.fromCharCode(108,111,99,97,116,105,111,110,46,104,114,101,102,32, 13 61,32,39,109,97,105,108,116,111,58) 14 + escape(k_1) + 15 converter(String.fromCharCode(115,100,114,115,63,115,100,114,115,45,105,111, 16 62,114,116,97,105,100,98,115,60)) 17 + escape(k_2) + "'");} 18 </script> 19 <a class="logo" href="#">サイト名</a> 20 <div id="nav-drawer"> 21 <input id="nav-input" type="checkbox" class="nav-unshown"> 22 <label id="nav-open" for="nav-input"><span></span></label> 23 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 24 <ul class="header-list"> 25 <li><a href="#">コンテンツA</a></li> 26 <li><a href="#">コンテンツB</a></li> 27 <li><a href="#">コンテンツC</a></li> 28 <li><a href="#">コンテンツD</a></li> 29 <li><a href="#">コンテンツE</a></li> 30 <li><a href="#">コンテンツF</a></li> 31 <li><a href=JavaScript:mail_to("","")>メール</a></li> 32 </ul> 33 </div> 34</header>

上記の内容でmailtoリンク等を正常に表示できました。

投稿2022/06/03 09:40

ganeru

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問