44

jQuery は Metro JavaScript アプリのオプションのように聞こえたので、Windows 8 開発を楽しみにしていました。Visual Studio 2012 Express RC をインストールし、新しいプロジェクトを開始しました (空のテンプレートとグリッド テンプレートの両方に同じ問題があります)。

jQuery 1.7.2 のローカル コピーを作成し、スクリプト リファレンスとして追加しました。

<!-- SomeTestApp references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.7.2.js"></script>
<script src="/js/default.js"></script>

残念ながら、結果のアプリを実行するとすぐに、コンソール エラーが表示されます。

HTML1701: 動的コンテンツ ' a' を追加できません スクリプトが動的コンテンツ、または以前に動的に変更された要素を挿入しようとしましたが、安全ではない可能性があります。たとえば、innerHTML プロパティを使用してスクリプトまたは不正な形式の HTML を追加すると、この例外が生成されます。toStaticHTML メソッドを使用して動的コンテンツをフィルタリングするか、createElement などのメソッドで要素と属性を明示的に作成します。詳細については、 http: //go.microsoft.com/fwlink/?LinkID=247104を参照してください。

縮小されていないバージョンの jQuery でブレークポイントを平手打ちし、問題のある行を見つけました。

div.innerHTML = "   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";

どうやら、Metro アプリのセキュリティ モデルでは、この方法で要素を作成することは禁止されています。このエラーはユーザーに差し迫った問題を引き起こすわけではありませんが、その場所を考えると、jQuery での機能検出テストが失敗してはならないのではないかと心配しています。

$.Deferredほぼすべてを簡単にするために、jQueryが絶対に必要です。セレクター エンジンとイベント処理システムを使用できるようにしたいと考えていますが、必要に応じてそれらを使用しなくても済みます。

最新の jQuery を Metro 開発とうまく連携させるにはどうすればよいでしょうか?

4

11 に答える 11

33

次のように、安全でないコンテンツのチェックを無効にするjQuery.support関数をに渡すように、jQuery ソースを編集する必要があります。MSApp.execUnsafeLocalFunction

jQuery.support = MSApp.execUnsafeLocalFunction(function() {

    var support,
        all,
        a,
        select,
        opt,
        input,
        fragment,
        tds,
        events,
        eventName,
        i,
        isSupported,
        div = document.createElement( "div" ),
        documentElement = document.documentElement;


    // lots of statements removed for brevity

    return support;
});

execUnsafeLocalFunctionかっこの最後のペアを削除することを忘れないでください。渡された関数を自動的に実行するため、自己実行関数は必要ありません。

より良いアプローチは、WinJS 機能を使用することです。これには、WinJS.Promise遅延操作 (それ自体が Promise パターンの実装) の代替としてのオブジェクトが含まれます。WinJS.Utilitiesまた、名前空間を使用していくつかの基本的な DOM 操作を行うことができます。

遅延操作に jQuery を使用することについては、よく考える必要があります。このWinJS.Promiseオブジェクトは、Metro API 全体で非同期アクティビティを表すために使用され、似ているが異なる 2 つのアプローチを使用することになります。

于 2012-06-02T12:46:01.100 に答える
8

これがあなたの答えです

https://github.com/appendto/jquery-win8

Windows 8 用の公式 jquery ライブラリ

于 2012-11-13T14:26:54.843 に答える
7

最近の//Build/ 2012カンファレンスとこの講演の後、 Windows 8StoreAppsでのjQueryの使用について説明します。具体的には、innerHTML内のスクリプトインジェクションの正確な例外について話し、これで行われた更新について話します。

AppendTo社はまた、その講演の中でWindows8用のjQueryを公式に発表しました。についてのリンクのトークで与えられたデモンストレーションからそれはきちんと見えます。

彼らはまた、ローカルコンテキストでWindows 8アプリ用のCDNからjQueryを取得するのは良い考えではないと言います！

于 2012-11-07T04:31:27.560 に答える
7

それだけの価値があるため、ネイティブの WinJS ライブラリをラップするために、jQuery コアの大部分を移植しました。軽量で、バッジや通知などのプラグインを追加することで、jQuery が行うほぼすべての機能を提供します。

進行中の作業ですが、何人かの人々に参加してもらいたいと考えています。

https://github.com/rmcvey/winjq

簡単な記事 (ドキュメントを追加中): http://practicaljs.com/jquery-in-windows-8-apps/

于 2012-08-31T17:44:17.700 に答える
6

このエラーに対処するために、GitHubのJavaScript Dynamic Content shimが Microsoft Open Technologies によって作成およびリリースされました。jQuery でテストされていませんが、おそらく問題は解決します。他のスクリプトが実行される前に、アプリの冒頭で winstore-jscompat.js ファイルを参照すると、このエラーは表示されなくなります。

于 2014-08-19T18:38:53.350 に答える
2

私はもう少し調査を行い、いくつかのことを明確にしたかった.

表示されるエラーは、実際の例外ではなく、JavaScript コンソールにあります。jQuery コードは問題なく動作し続けます。これは実際には、エラーや例外ではなく、基盤となるシステムがログに記録しているものです。

jQuery にパッチを当てたり、他のことをしたりする理由はありません。これはノイズの多いシステム コンポーネントであり、実際のエラーではありません。

于 2012-06-12T19:54:10.877 に答える
0

次の形式のすべてのコードを置き換えた限り、jQuery自体は最新バージョンでそのような例外をスローしませんでした。

$('<input type="button" value="Press Me" />')

と

$(toStaticHTML('<input type="button" value="Press Me" />'))

すべての HTML 文字列が安全でないと見なされるわけではないことに注意してください。

$('<span></span>')

例外をスローしません。ただし、次のようなことを行うと、jQuery は依然として追加時に例外をスローします。

var div = '<div class="' + classesToApply + '"';
div += attrToAdd;
div += '</div>';

$(div).appendTo(container);

上記は、jQuery を使用した優れたプラクティスの例ではありませんが、一部の人はそれを行っているため、エラーが発生する可能性があります。上記のコードは、最初のスニペットと同じエラーを生成せず、代わりに jQuery.append 内でエラーをスローすることに注意してください。このエラーは、実行することで修正されます$(toStaticHTML(div)).appendTo(container);

于 2012-08-20T09:10:40.373 に答える
0

innerHTML を設定する jQuery 内のすべての場所を見つけ、設定されている値を でラップすることで、問題を解決できましたtoStaticHTML()。

たとえば、次のようになります。

div.innerHTML = "   <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";

なりました：

div.innerHTML = toStaticHTML("   <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>");

安全のために、ファイルが通常のブラウザで使用される場合に備えて、jQuery が定義される直前にこれも定義しました。

window.toStaticHTML = window.toStaticHTML || function (s) { return s; };

jQuery の多くの箇所にパッチを適用する必要がありましたが、私にはこれが最も安全な変更のように思えました。(toStaticHTML の前に var ステートメントを使用しないでください)

于 2012-08-10T22:05:19.907 に答える
0

それでも必要な場合は、jQuery にある Deferred オブジェクトの再実装を書いています。

完了すると、jQuery の Deferred オブジェクトと 100% 互換性があるはずです。現在、それはかなり完成していますが、いくつかのテストが必要です。

これを参照してください。

これが役立つことを願っています！

とはいえ、Windows 8 アプリで作業する場合は、jQuery の代わりに Microsoft の Promise の実装を使用する方法を学ぶことをお勧めします。

于 2012-06-15T13:49:52.653 に答える
0

これは、コンテンツ セキュリティ ポリシー (CSP) によって課される制限と同じだと思います。その特定のケースは、jQuery 1.8.0 で対処されました。それでも問題は発生しますか?

https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3

于 2012-08-11T01:53:20.547 に答える