3

私のサイトには、スパム ハーベスターの作業を少し難しくするために、このようなものがあります。デフォルトでは、サイトには「noob (at) me (dot) com」と表示されますが、JavaScript によってこのテキストが実際のメール アドレスに置き換えられます。

<span id="email">noob (at) me (dot) com</span>

<script type="text/javascript" src="email.js"></script>
<script type="text/javascript">
  document.getElementById('email').innerHTML = emailProducingFunction();
</script>

これは機能します。ただし、問題は、JS が実際の電子メールに切り替わる前に、元のテキストが一瞬表示されて、サイトの読み込み時に短い「点滅」効果が発生する場合があることです。

どうにかしてこれを回避することは可能ですか？

1 つの "解決策" は、CSS を使用して電子メール要素を非表示にし、JS を使用して再表示することです。ただし、このサイトは、CSS が有効で JS が無効になっているブラウザーとも互換性がある必要があるため、これは良い解決策ではありません。

4

5 に答える 5

4

ちらつきの問題を解決する代わりに、同じ現象に悩まされない別の方法を提案できます。

メール難読化の代替手段

ちらつきを軽減する代わりに、電子メール アドレスを逆にしてから CSS を使用して正しく表示するなどの価値のある代替手段を検討したことがありますか? この手法は、スクリーン リーダーやコピー アンド ペーストの点では最適ではないかもしれませんが、あなたの手法とは異なる方法で使用する価値のある手法は他にもあります。

スーパーユーザーでこの回答を確認してください

この回答は、さまざまな電子メールの難読化手法に関するこの調査をまとめたものです。CSS リバースは、最も効果的なものの 1 つと思われます。

CSS リバースとクリッカビリティ/選択の使用

したがって、あなたのテクニックは、ロード時にページ上のすべての電子メールを Javascript を使用して置き換えます。CSS ソリューションは逆メールを正しく表示しますが、そのようなメールをクリックするか (コピーのために) 選択すると、逆メールが返されます。

したがって、CSS を使用してこれらの日常的なシナリオを改善するには、オンデマンドでのみ実行されることを除いて、あなたと同様のソリューションである javascript を使用して行うことができます (常にあなたの場合とは限りません)。要素にクリック/選択イベントを添付し、必要に応じてそのコンテンツを反転するのは簡単です。

私が言おうとしているのは、CSS の難読化を使用しても、Web サイトのユーザビリティが低下しない可能性があるということです。それはまだ可能です。

于 2012-11-12T10:36:50.577 に答える
2

このちらつきは、元のアドレスが表示され、email.js スクリプトが読み込まれ、関数が適用されるために発生します。ファイルの読み込みと関数の実行により、ちらつきが発生するのに十分な時間が残ります。

解決策は、元のアドレスが表示される前にスクリプト タグを配置することです。ただし、#email 要素をそのまま使用しようとすると、存在しないためエラーが発生します。したがって、イベントを使用しDOMContentLoadedて要素が存在するのを待つことができます。( $(document).ready()jQuery に慣れている場合。)

この方法を使用すると、ちらつきがなくなります。

例：

<script src="email.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('email').innerHTML = emailProducingFunction();
}, false);
</script>

<span id="email">noob (at) me (dot) com</span>
于 2012-11-12T10:42:57.713 に答える
1

ページの読み込みが開始されたときに、要素にjsクラスを追加できます。body

<body>
  <script>document.body.className += " js";</script>
  <style>body.js #email {display: none;}</style>

したがって、「難読化された」アドレスが「非 JS」ユーザーにのみ表示されるようにします。

于 2012-11-12T10:37:34.713 に答える
0

<script>要素をemail 要素の前に移動します。

<script type="text/javascript" src="email.js"></script>

<span id="email">noob (at) me (dot) com</span>

<script type="text/javascript">
  document.getElementById('email').innerHTML = emailProducingFunction();
</script>
于 2012-11-12T10:42:51.240 に答える