2016-04-25 30 views
0

ブラウザでJavaScriptが有効になっているかどうかをチェックする短いルーチンを作成しました。JavaScriptが有効なチェックルーチンは、Chrome/Opera/IEでは動作しますが、Firefox/Safariでは動作しません。

Chrome、Opera、IE11で動作します。 FirefoxやSafariでは動作しません。これらのブラウザでは、無限リフレッシュループが発生します。私は、FirefoxとSafariでなぜ失敗しているのか、そしてそれらのブラウザで動作させる方法を理解したいと思います。

私は以下の4つの別々のphpファイルにコピーして実行することができます。運が良ければ、Chrome、Opera、IEで同じ成功を収め、FirefoxとSafariでも同じような失敗が起こります。

概要:index.phpは、AJAX呼び出しを純粋なJavaScriptで書かれています(すなわち、JQueryは必要ありません)。デフォルトでは、最初にfalse.phpbody_message.phpにコピーされます。これは後でindex.php<body>メッセージに含まれます。ブラウザでJavaScriptが有効になっている場合、セクションはajax_copy_file.phpを呼び出し、body_message.phptrue.phpに上書きします。その結果、index.phpには、JavaScriptがブラウザで有効になっているかどうかを示す短いメッセージが表示されます。

JavaScriptは縮小されていますが、運が良ければ完全なルーティンは必要ありません(メインジストを縮小することができます)。

これはindex.phpを次のとおりです。

<?php 
session_start(); 
?> 
<!DOCTYPE html> 
<head> 
    <title>JavaScript Test</title> 
<?php 
if (!isset($_SESSION['JavaScript'])) { 
    copy('false.php', 'body_message.php'); 
?> 
    <script>var ajax={},hasAX=window.hasOwnProperty("ActiveXObject");ajax.x=function(){if(hasAX){for(var a="MSXML2.XmlHttp.6.0 MSXML2.XmlHttp.5.0 MSXML2.XmlHttp.4.0 MSXML2.XmlHttp.3.0 MSXML2.XmlHttp.2.0 Microsoft.XMLHTTP".split(" "),b,c=0;c<a.length;){try{b=new ActiveXObject(a[c]);break}catch(f){alert(f)}c+=1}return b}return new XMLHttpRequest};ajax.send=function(a,b,c,f,d){void 0===d&&(d=!0);var e=ajax.x();e.open(c,a,d);e.onreadystatechange=function(){4===e.readyState&&b(e.responseText)};"POST"===c&&e.setRequestHeader("Content-type","application/x-www-form-urlencoded");e.send(f)};ajax.post=function(a,b,c,f){var d=[];Object.keys(b).forEach(function(a){d.push(encodeURIComponent(a)+"="+encodeURIComponent(b[a]))});ajax.send(a,c,"POST",d.join("&"),f)};function logStuff(a){"string"===typeof a?console.log(a):"object"===typeof a&&Object.keys(a).forEach(function(b){console.log(b+": "+a[b])})}ajax.post("ajax_copy_file.php",{copy_file:"true.php"},logStuff,!0);location.replace("index.php");</script> 
<?php 
} 
?> 
</head> 
<body> 
<?php 
unset($_SESSION['JavaScript']); 
include('body_message.php'); 
?> 
</body> 
</html> 

これはajax_copy_file.phpです:

<?php 
session_start(); 
copy($_POST['copy_file'], 'body_message.php'); 
$_SESSION['JavaScript'] = 'true'; 
echo 0; 
exit; 
?> 

これはtrue.phpです:

<p>TRUE: JavaScript enabled</p> 

これはfalse.phpです:

<p>FALSE: JavaScript disabled</p> 

これはChrome、Opera、IEで動作するのですが、FirefoxとSafariでは動作しません(無限ループを引き起こします)。

答えて

0

問題は、あなたがajax.postを使ってXHRを送信した後、あなたlocation.replace("index.php")コードが配置されていますが、XHR要求は非同期であるので、true.php/false.phpファイルがコピーされた前にあなたが戻ってリダイレクトしてしまうことがあります。私はこれがFirefoxとSafariに分離されていると推測しています。なぜなら、他のブラウザはXHRに対して大きな最適化を行っているか、性能上の理由からlocation.replaceを遅らせているからです。 location.replaceをXHR readystateイベントハンドラまたは成功関数に入れると、Firefoxで動作します。

https://jsfiddle.net/j5qpwy9f/1/

その他の注意事項:更新jsFiddleを参照してください

  • あなたのオブジェクトのシリアル化方法が少し間違っていますが、 encodeURIComponentを実行した後、%20+に置き換えてください。
  • これは最終的なコードではなく、<noscript>に固執してください。あなたのアプローチには、AJAX、セッション、クッキー、PHP、JS、3つのHTTP接続、1つのページを読み込むリダイレクトを使用するものが多くあります。HTMLのための

使用<noscript>タグは、JavaScriptが無効になっている場合にのみ解析します。

<noscript> 
    <style> 
     #jsOnly { 
      display: none; 
     } 
    </style> 
</noscript> 
<noscript>JavaScript is disabled</noscript> 
<p id="jsOnly">JavaScript is enabled</p> 

https://developer.mozilla.org/en/docs/Web/HTML/Element/noscript

あなたが例をしたい場合は、http://enable-javascript.com/そのソースを見てください。

+0

私は完全に

+0

@Tom私は答えを更新しましたが、依然として代替方法を強く提案します。 – lerouche

関連する問題