特定のブラウザ幅に対して特定のJavascriptファイルが必要です。私は@mediaがブラウザの幅と特定のデバイスごとに特定のCSSを提供していることを知っています。 サーバサイドコールを使用せずにJavascriptファイルと同様の処理を行うにはどうすればよいですか？ブラウザの幅によって異なるjavascriptファイルを提供する方法
ブラウザの幅に基づいて他のJavascriptファイルを呼び出すことはJavascriptで可能ですか？ もしそうなら、どのように？
ありがとうございます。
なぜかわからないのですが、JavaScriptスクリプトを使用してJavaScriptファイルをいつでもインポートできます。
次のリンクからこの情報を得ることができます。サイドノートON
- なぜあなたはこれをやって見ていますか？確かに、画面の解像度を取得し、JSファイルを変更することなく、これらの変数に基づいて計算/コンテンツを調整することができます。非常に多くの異なる解像度（モバイルデバイス、複数のモニタ、ワイドスクリーン、プロジェクタなど）があります。また、ユーザーはブラウザを効果的にサイズ変更することができます。
私は主にモバイルウィンドウのサイズのアコーディオンメニューとデスクトップのブラウザサイズのフェードインメニューを切り替えることを検討しています。 – ClosDesign
@Carlos：私は最近、自分のデスクトップページをモバイルデバイス用に使用している単一サイトを知っているとは思わない。私は自分自身を頭痛から救い、ブラウザのフォワーディングを見て、サイト自体についてもっと心配しています。あなたが**非常にシンプルなサイトを持っていない限り、とにかくモバイルのためにそれを合理化したいと思うチャンスです（メディアをカットし、余分なグラフィックスなど） –
var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
おそらく？画面の解像度に基づいて動的にロードします。ドキュメントのサイズ、ブラウザのサイズなどを使用することもできます。私は肯定的ではありませんが、実際にこれをやりたがっています。 理想的には、設計で相対的なメトリック（％やemなど）を扱い、これを避ける必要があります。
私はidを設定することでjQueryとsimliarを試しました既定のスクリプトタグに追加してから、それに基づいてファイルを切り替えることができます。私はあなたの方法でそれを試してみることがあります、Firebugでファイルをロードしようとしているページでエラーが発生しました。すべてのパスが正しいですが、私はちょうどこのようにそれを追加することがあります。 – ClosDesign
これを使用して特定のファイルも省略できると思いますか？ – ClosDesign
@Carlos：はい、できます。ちょうど重要なことは、あなたが必要とする/望むまでロードプロセスで回避する必要があることです。重大な再宣言をせずに既にロードしたファイルをアンロードすることはできません。あなたは、スクリプトを相対的なサイズに基づいて実行させるか、いくつかのバージョンを作成して共通のアクセサにバインドするか、またはこのパスで続行して適用するものをロードするかのいずれかを行うことができます。 –
これを試してみてください：
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
if (window.document.body.clientWidth == XXX) {
fileref.setAttribute("src", "script1.js")
} else {
fileref.setAttribute("src", "script2.js")
}
メディアクエリは、別のウィンドウ幅のための代替スタイルを提供するための優れたソリューションです。残念ながら、<script>要素が同様に処理されるための属性はmediaではありません。
しかし、あなたのメディアクエリに基づいてブラウザによって選択されたスタイルシートに応じて、所望の.jsファイルをロードするスクリプト読み込みスクリプトを提供することができます。私は直接、エレガントな方法でこれを行う方法を知らないが、それのための素敵なハックがあります。それぞれの.cssには、ブラウザによって適用されたスタイルシートを判断するために、ページがロードされた後にユニークな宣言（ダミー、設計上重要でない、または異なる）を「マーク」してJS内からチェックする必要があります。
HTMLは次のようになります。次のように
<style media="handheld, screen and (max-width:1023px)">
body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
body { margin-top: 1px }
</style>
および添付JS：
function onLoad() {
var head = document.getElementsByTagName('head')[0];
var body = document.getElementsByTagName('body')[0];
var mark = window.getComputedStyle(body).getPropertyValue('margin-top');
var script = document.createElement('script');
script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
head.appendChild(script);
}
これは仕事をしていませんが、唯一あたりの負荷ベースで。ユーザーがブラウザのウィンドウのサイズを変更する反応に反応するには、ウィジェットの幅を追跡し、必要に応じてページをリロードする必要があります。
2011年以降、世界はモバイル時代に移行しています。
お試しください：document.documentElement.clientWidth、あなたのページの表示領域を教えてくれるので、ズームに反応してもピッチには反応しません。
なぜ異なるjavascriptファイルが必要ですか？ユーザーがウィンドウのサイズを変更した場合はどうなりますか？ –
さまざまな幅に異なるコードが必要であることはほとんど疑問に思えます。 –
私はこれがメディアクエリを使って素晴らしいと思う何かを知っています。 jsを必要とする要素の多くは、モバイルスタイルシートでは存在しません。個人的にブラウザが一定の幅以下になると、jsの読み込みを完全に停止したいと思います。 –