4

ブラウザのサイズに応じて、メディア クエリに HTML とは異なる JavaScript ファイルをロードさせることは可能ですか (そうであれば、どのように) 可能ですか?

これに沿った何か？

<script media="screen and (max-width: 900px)" src="/js/menu_home.js"  type="text/javascript"></script>

または、インターネットで見つけたこのようなものですが、どちらのファイルもロードしませんでした

<script>
function require(path) {
  try{
    document.write('<script type="text/javascript" src="'+path+'"><\/script>');
  } catch(e) {
    var script = document.createElement('script');
    script.src = path;
    document.getElementsByTagName('head')[0].appendChild(script);
  }
}
if (isMedia("screen and (max-width:900px)"){
  require('/js/menu_home.js');
}
else {
  require('/js/menu_photo.js');
}
</script>

私のウェブサイトhttp://www.kujawadesigns.com/web/where_art_thou/で、適切なカテゴリでアコーディオン メニューを展開できるように、さまざまなスクリプト ファイルをロードするように設定しました。ただし、expandfirst クラスを常にモバイル バージョンから削除したいと考えています。別のプロセスを使用することをお勧めする場合は、お知らせください。

前もって感謝します！

4

1 に答える 1

5

matchmediaを使用すると、特定のメディアクエリ条件が満たされた場合にのみ JavaScript のブロックを実行できます

<script>
    if (window.matchMedia('screen and (min-width: 600px)')){
      var head = document.getElementsByTagName("head")[0];
      s = document.createElement('script');
      s.setAttribute('type','text/javascript');
      s.setAttribute('src',jsname);
      head.insertBefore(s, head.firstChild);


    }
</script>

参照: http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

注: 古い/サポートされていない Web ブラウザーの場合は、addListener をサポートしていませんが、matchMedia() ポリフィルを試すことができます。

于 2013-04-05T02:38:28.033 に答える