2

ファイルからロードしたい 3 つの JavaScript ファイルがありindex.htmlます。ifJavasSript でしか実行できないステートメントを使用して、それらの中から選択しています。ただし、JavaScript の本文では、次のようなことは言えないようです。

<script type="text/javascript">
if(window.innerHeight == 800)
     <script type="text/javascript" charset="utf-8" src="storybook.js"></script>

条件の後に JavaScript ファイルを実行するために使用できる関数または何かがありますか?

4

4 に答える 4

4

アップデート

この回答を最初に書いたとき、状況はすでに変化していましたが、この回答が時代遅れではないところまで変化し続けています。スタイルシートでメディア クエリを使用して、探しているレスポンシブ レイアウトを取得する方法があるため、The 2014 Guide to Responsive Web Designを参照してください。FoundationやBootstrapなどのフレームワークはレスポンシブ レイアウトを提供し、面倒な作業の多くを処理するようになったため、サイトの配管をコーディングする代わりに、サイトの設計に時間を費やすことができます。

元の答え

いくつかの方法がありますが、ここに 1 つ (外部 JavaScript または CSS ファイルを動的にロードすることから、Google が「動的ロード JavaScript」を検索して見つけたもの) があります。

function loadjsfile(filename){
   var fileref = document.createElement('script');
   fileref.setAttribute('type', 'text/javascript');
   fileref.setAttribute('src', filename);
   if (typeof fileref !== 'undefined') {
      document.getElementsByTagName('head')[0].appendChild(fileref);
   }
}

loadjsfile("storybook.js"); //dynamically load and add this .js file

もう 1 つの方法は、ファイルを動的にロードする代わりに、必要なすべてのコンテンツを 1 つのファイルにロードすることです。次に、正しいスクリプトを呼び出します。これはファイル全体をロードすることで批判される可能性がありますが、ユーザーが画面サイズを変更するとどうなるでしょうか? たぶん、両方のリソースをロードしたいでしょう。画面サイズの変更は、人々がウィンドウのサイズを変更したり、別の解像度の別のモニターにウィンドウを移動したりするほど、大したことではありません。

// storybook800.js
function for800() {
   return {
      // all your module's stuff
   };
};

// storybook1600.js
function for1600() {
   return {
      // all your module's stuff
   };
};

// main document
var storybook;
if (window.innerHeight === 800) {
   storybook = for800();
} elseif (window.innerHeight === 1600) {
   storybook = for1600();
}

ただし、どちらのオプションもあまりお勧めしません。別々のファイルを維持することはおそらく本当に問題になるでしょう。完全に異なるファイルをロードする代わりに、コード内で検出するだけです。パラメータを渡すかwindow.innerHeight、より良い方法で、JavaScriptファイルでそれを検出してください：

//storybook.js
function mystorybook() {
   if (window.innerHeight === 800) {
      //do something appropriate.
   }
};

それが難しいと思われる場合は、いくつかのヘルパー関数を追加してください。たとえば、サイズに依存する関数を含むさまざまなキーを持つオブジェクトがさまざまなサイズで実行されることを期待する関数を作成します。次のように呼ばれることがあります。

doSomethingSizeSensitive({
   800: function() {
   },
   1024: function() {
   },
   1600: function() {
   }
});

次に、現在の画面サイズと渡されたオブジェクト キーに基づいて正しい結果を選択する最善の仕事をするコードをその関数に記述できます。実際に関数を実行する代わりにdoSomethingSizeSensitive、渡した適切な関数または値を返し、それを使用または保存できます。

var myaction = getSizeSensitiveFunction({
   800: function() {
   },
   1024: function() {
   },
   1600: function() {
   }
});
myaction(); // for the rest of the lifecycle of the page, it does the right thing.

関数だけでなく、値も含めて、関数が何かを返すようにすることができます。また、画面サイズが 1280 や 1528 などの奇妙なサイズの場合はどうでしょうか。機能を賢く選択する必要があります。オブジェクトにエンコードするか、他のコードから呼び出されるスタイル関数を検出することにより、異なる必要がある部分を抽象化して取り除く方法を考えてください。そうすれば、コードの残りの部分はすべて同じになります。

おそらく、セットアップ オブジェクト全体が必要です。

sizedata = {
   800: {
      something1: function() {},
      value1: 'small'
   },
   1600: {
      something2: function() {},
      value2: 'large'
   },
};

正しいサブオブジェクトを正しく選択する機能と組み合わせることで、sizedata何かを微調整したり、新しい画面サイズを追加したりするときはいつでも最適な状態になります。すべてが 1 か所にあります。修正または維持する時が来たら、あなたは天国にいます。

于 2013-01-08T04:27:39.500 に答える
1

スクリプトをドキュメントに追加する。

if(window.innerHeight == 800){
    var script = document.createElement("script");
    script.src = "storybook.js";
    document.getElementsByTagName("head")[0].appendChild(script);
}
于 2013-01-08T04:26:07.163 に答える
0 
var s = document.createElement("script");
s.src="myscript.js";
document.head.appendChild(s);

ああ、同時に同じ答えがたくさんあります。

于 2013-01-08T04:29:35.397 に答える
0

私はjavascriptを初めて<header id='h'></header>使用しますが、次のコードを使用してスクリプトをヘッダーに追加できるように、idを設定できると思います：

var h = document.getElementById('h');
var scripts = document.createElement('script');
switch(window.innerHeight){
    case 800:
      scripts.src = 'storybook.js';
      scripts.type = 'text/javascript';
      break;
}
h.appendChild(scripts);

大文字と小文字を追加して、スクリプトのソースを変更できます。読んでくれてありがとう。

于 2013-01-08T04:49:39.627 に答える