読み込みページでHTTPリクエストをキャプチャする

私が必要としていることを伝えるために、比較的長い説明が必要になるので、気をつけてください。読み込みページでHTTPリクエストをキャプチャする

私はウェブ開発フレームワークを構築しており、対処する必要のあるエンティティの1つはcomponentsです。 componentはウェブページの一部です。グラフやテーブル、あるいは他のものかもしれません。コンポーネントは、このコンポーネントsome.namespace.component_nameの内容を取得し、ID dom_areaで、dom_areaにHTML要素をそれらをロードするためのフレームワークを言うだろう

EMERALD.component.show('some.namespace.component_name','dom_area');

このようにjavascriptのメソッドへの呼び出しによってページにロードされます。

最も単純なのは、静的なHTMLコードです。そして、このHTMLには、CSSファイルへの参照や画像など、新しいHTTPリクエストを作成する要素が含まれている可能性があります。

コンポーネントはディレクトリ構造に格納されます。一例として、上述した成分some.namespace.component_nameを使用して、それが実際、この

assets/ 
    | 
    -- components/ 
     | 
     --some/ 
      | 
      -- namespace/ 
       | 
       -- component_name/ 
        | 
        -- config.json 
        | 
        -- css/ 
        | | 
        | -- layout.css 
        | 
        -- images/ 
        | | 
        | -- some_image.jpg 
        -- page.html

物事のような非常に簡単で記憶されます。 KISSの原則は私のパラダイムの1つです。 EMERALD.component.show('some.namespace.component_name','dom_area');は、いくつかのことの後、HTMLフラグメントpage.htmlを読み込みます。

私の問題がある：page.htmlがロードされると、それはlayout.cssとsome_image.jpgをロードした場合、それらが絶対的に参照されない限り、HTTP要求は、ロードするつもりはない、これは私には便利ではありません。

私は何をしたいことはpage.html

よう

<link rel="stylesheet" type="text/css" href="layout.css"> 
<div class="container-fluid"> 
    <div class="thering"></div> 
</div>

と

.thering { 
    height: 385px; 
    background: #000 url('thering.png'); 
    border-color: #222 !important; 
}

のようなlayout.cssを持っている。そしてlayout.css（page.html中）とthering.png（中のHTTPリクエストを捕捉していますlayout.css）正しいパスが追加され、正しくロードされます。

私はいくつか試しましたが、うまくいきませんでした。助言がありますか？

出典

2016-08-07 Ed de Almeida

1ページのソリューションで問題が解決しない場合は、<base>要素を使用できます。そして、あなたが書いたすべての行に絶対値は必要ありません。

Require.jsは、今後お客様のニーズに最適なソリューションです。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Add Base</title> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var base = document.createElement('base'); 
 
    base.href = 'https://sub.domain.com/absolute/path/to/'; 
 
    document.getElementsByTagName('head')[0].appendChild(base); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-08-07 23:24:05 zer00ne

ない "魔法の道"、確かに。そして私の参考文献は正しいものでした。あなたは私が何を意味するのか分からない。私が言ったことは、絶対パスのないファイルだけを言及し、フレームワークがファイルを見つけさせることを意図したことでした。これが私がファイルの名前だけを書いた理由です。 –

しかし、私はあなたが意味するものを得て、あなたのソリューションは私にとって完璧です。純粋なJavascriptではなくjQueryを使用するため、少し短くしました。しかし、ありがとう！ –

私はキスとは何を意味するのか分からないことに驚いています。「Keep it Simple、Stupid」は、広く知られているパラダイムである：https：// pt。wikipedia.org/wiki/Keep_It_Simple あなたは皮肉なことに、それは魔法とは何の関係もありません。物事を非常にシンプルに保つ方法です。そしてプログラマーは、あなたが確かに知っているように、コードの複雑さを吸収して、ユーザにとって単純なものにしています。 –

読み込みページでHTTPリクエストをキャプチャする

答えて

関連する問題