0

現在、IndexedDB を使用してこのページの iframe に html ドキュメントを表示する Web ページをセットアップしています。このドキュメントは、BLOB としてデータベースに既に存在します。また、この Web ページをオフラインだけでなくオンラインでも機能させたいと考えています。MDN のコードを使用して、これらすべてを開始することができました。

現在、ブロブを指す URL を作成し、それをiframeのsrc属性に配置することで、一度に 1 つのドキュメントを表示しています。HTML ドキュメントはうまく表示されていますが、css と javascript ファイルは "localhost:8080/my_css.css" のような URL で HTML ソースにリンクされているため、現在、サーバーに保存されている CSS/JS と画像を使用しています。オフラインになると役に立ちません。

私の質問は次のとおりです: データベースに保存されている CSS/JS/画像を、このドキュメントの html コードを変更せずに html ドキュメントにバインドして iframe に完全に表示する方法はありますか? Application Cache API を使用して必要なファイルをローカルに保存できると思いますが、大量の CSS および JS ファイルが存在する可能性があるため、IndexedDB API を使用する方法を使用したいと思います。

ご回答ありがとうございます。

それが役立つ場合、私のHTMLはどのように見えますか:

<ul id="blob-list"> /*List of blobs is generated here */ </ul>
<iframe id="myframe" name="myframe"> /*My html documents are displayed here*/ </iframe>

<script type="text/javascript">
const DB_NAME = 'testdatabase';
  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
  const DB_STORE_NAME = 'publications';

  var db;

 /**
  * @returns Permet d'ouvrir la DB afin de pouvoir l'utiliser
  */
  function openDb() {
    /* Open Database, create a store if not any and display its content. Code based on MDN example */
  }

       /* setInViewer is called every time a blob is clicked in #blob-list */
   function setInViewer(key) {
        var store = getObjectStore(DB_STORE_NAME, 'readonly');
        getBlob(key, store, function(blob) {
          var iframe = newViewerFrame();

          // Set a direct link to the blob to provide a mean to directly load it.
          var blobURL = window.URL.createObjectURL(blob);
          var myframe = document.getElementById("myframe");
          myframe.setAttribute("src", blobURL);
          window.URL.revokeObjectURL(blobURL);
        });
      }
   openDB();

</script>
4

1 に答える 1

0

それを達成するためにアプリケーションキャッシュを選択します。管理とバージョン管理が容易になります

于 2013-07-19T18:26:59.313 に答える