web-dev-qa-db-ja.com

javascriptが処理するHTMLページに隠しデータを含める

データベース内のデータから複雑なHTML要約レポートを作成します。これは、データベース内のおそらく200,000行の要約である可能性があります。ユーザーはリンクをクリックしてExcelバージョンを要求できます。

JSスクリプトを実行すると、レポートの主要なコンポーネントが抽出され、非表示のiframe内のフォームに詰め込まれます。このフォームは、Excelバージョンのレポート（グラフィックなどなし）を生成するサーバーサイドスクリプトに送信されます。

レポートの計算は複雑で「コストがかかる」ため、すべてのデータがすでにページ上にあるため、Excelバージョンを作成するために再度実行しないことは理にかなっています。また、ユーザーはレポートが読み込まれたらカスタマイズした可能性があり、JSを使用してそれらの設定をフォームに渡すこともできるので、Excelドキュメントにもレポートが反映されます。

私がこれを行う方法は、Excelバージョンの行に転送されるレポートの各コンポーネントに以下を含めることです。他の方法では使用されないHTMLタグをハイジャックしました。

   <code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>

上記のコード要素は、HTMLレポートの以下の行の要約であり、Excelドキュメントでは1行になり、ラベルとさまざまなデータ要素が含まれています。 1つのレポートにそのような要素が1000以上ある場合があります。

alt text

データにはテキストが含まれているため、レポート内の実際のテキストでは発生しない可能性があるため、フィールド区切り文字として}{などを使用する必要がありました。 CSSでcodeをdisplay：noneに設定しています。

ユーザーがレポートのExcelバージョンを必要とする場合、JSコードはHTMLで<code>要素を検索し、classNameとinnerHTMLをフォームに入力します。 classNameは、Excelで行をフォーマットする方法を示し、データはExcel行の隣接するセルに配置されます。

alt text

HTMLレポートには1パーセントベースが表示されます（それらは切り替えることができます）が、Excelバージョンを要求するときのユーザー設定は両方を含めることでした。

これを行うためのより良い方法はありますか？

（これは複雑なWebアプリの一部であるため、ユーザーがCSSをオフにしたり、JavaScriptを欠いたり、ここまで到達したりすることはありません）追加：ユーザーはIE6などの古いブラウザーを使用していることが多いため、HTML5を使用できません。

javascripthtmlembed
18
derekcohen

新しいデータ属性を使用する

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

<div data-row="[[&quot;Musicals&quot;,40,28.6,6], ...]">

Divは、TDタグまたはTRタグ、あるいは行にすでに関連しているその他の関連タグであり、&quot;はエスケープされた"です。

これにより、データが表示されなくなり、データを処理するための標準的なソリューションが確実に提供されます。

また、データのエンコードには、 [〜＃〜] json [〜＃〜] を使用することをお勧めします。これも使いやすい標準です。

11
David Mårtensson

標準ソリューション：

1）Javascriptデータブロックを使用します。

<script>
var mydata = {
         'Musicals': ['6','40%','28.6%'],
         "That's Life": ['2','13.2%','0.5%'],
         ...etc....
      }
</script>

2）要素属性を使用します:(詳細については、 http://ejohn.org/blog/html-5-data-attributes/ を参照してください）

<div class='my_data_row' data-name='Musicals' data-col1='6' data-col2='40%' data-col3='26.6%'>

...次に、Javascriptを使用して、必要に応じて属性をロードします。

この2番目のオプションは、データが問題の要素に関連している場合に使用されます。通常、他の場所で使用されるデータにこれを使用することは望ましくありません。あなたの場合、単純なJavascriptデータブロックがはるかに優れたソリューションになると思います。

2番目のオプションに従ってデータ属性を使用する場合は、属性に「data-」プレフィックスを使用していることに注意してください。これは、ユーザー定義の属性を通常のHTML属性から分離するHTML5仕様です。詳細については、リンク先のページを参照してください。

12
Spudley

あなたは試すことができます 新着 html5機能 localStorage 非表示のhtmlフィールドを使用する代わりに、つまり、ユーザーが確実に使用する場合 最新のみ 最新のブラウザ。

とにかく、コードの改善は、実際にデータを JSON 形式で保存することです。
の代わりに

Musicals}{40%}{28.6%}{6

あなたは次のようなものを使用します

{
    "label": "Musicals",
    "percentage1": 40,
    "percentage2": 28.6,
    "otherLabel": 6
}

このようにして、JavaScriptオブジェクトを作成するだけで 評価（評価）または 解析（JSON.parse）独自の中括弧プロトコルを解釈するよりも高速な方法で、非表示要素のinnerHTML。

2
gion_13

それをより良い方法で解決するための私のポイントは、これらの結果を取得してサーバーの一時XMLファイルに保存し、ブラウザーにコンテンツを表示し、ユーザーがExcelバージョンを要求したときに、一時XMLのみを取得する必要があることです。

Linq-to-XMLを見てください。その流暢なスタイルのプログラミングは、XMLファイルを数行で読み取り、そのようなExcelファイルを作成するのに役立ちます。

別の解決策は、オブジェクトコレクションをJSONにシリアル化し、DataContractJsonSerializerを使用してそれらを逆シリアル化することです。これにより、一時ファイルのサイズがXMLアプローチよりも小さくなります。

1
Matías Fidemraizer