使用AngularJS的JavaScript中的Windows Phone應用程序

Question

我正在用JavaScript開發Windows Phone應用程序。 我正在使用AngularJS庫。 問題是由於安全原因我無法添加動態內容。

我得到的錯誤： HTML1701: Unable to add dynamic content '<div id="view_login" class="view"> <div id="view_login_container"> <img class="logo" src="http://oi60.tinypic.com/okwifa.jpg"> <input type="text" placeholder="Username" ng-model="loginUsername"> <input type="password" placeholder="******" ng-model="loginPassword"> <button ng-click="doLogin()">Login</button> <button ng-click="changeView('/signup')" class="link">... or sign up now</button> </div> </div>'. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104. HTML1701: Unable to add dynamic content '<div id="view_login" class="view"> <div id="view_login_container"> <img class="logo" src="http://oi60.tinypic.com/okwifa.jpg"> <input type="text" placeholder="Username" ng-model="loginUsername"> <input type="password" placeholder="******" ng-model="loginPassword"> <button ng-click="doLogin()">Login</button> <button ng-click="changeView('/signup')" class="link">... or sign up now</button> </div> </div>'. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

我在AngularJS庫中更改了一行來修復問題：

append:function(a,c){
   **MSApp.execUnsafeLocalFunction(function () {**
      r(new N(c),function(c){
         1!==a.nodeType&&11!==a.nodeType||a.appendChild(c)
      })
   });
} 

不幸的是它沒有用。

我花了幾個小時試圖找到解決方案，但我沒有管理它。 我將不勝感激任何建議如何使用AngularJS編寫用JavaScript編寫的Windows Phone應用程序。

Answer 1

Microsoft Open Technologies最近發布了一個墊片，它可以防止使用AngularJS的Windows Store應用程序以及許多其他流行的JavaScript庫出現這個問題。

只需從GitHub下載JavaScript Dynamic Content墊片 ，然后在運行任何其他腳本之前將文件引用到應用程序的開頭。 您不應再看到動態內容錯誤。

如果這解決了您的問題，請告訴我！

Answer 2

我在Windows應用商店應用中使用Angular時遇到此問題。 我提出的解決方案是修補不安全的DOM操作函數，而不是不得不破解Angular或jQuery，因為我仍然希望能夠使用bower進行更新。

var patch = {
    methods: [
        'appendNode',
        'cloneNode',
        'insertBefore',
        'removeChild',
        'replaceChild'
    ],

    properties: [
        'innerHTML',
        'outerHTML'
    ]
};

patch.methods.forEach(function (name) {
    proxyUnsafeMethod(HTMLElement.prototype, name);
});

patch.properties.forEach(function (name) {
    proxyUnsafeProperty(HTMLElement.prototype, name);
});

function proxyUnsafeMethod(object, name) {
    var _unsafe = object[name];

    object[name] = function () {
        var context = this;
        var args = arguments;

        return MSApp.execUnsafeLocalFunction(function () {
            return _unsafe.apply(context, args);
        });
    };
}

function proxyUnsafeProperty(object, prop) {
    var descriptor = Object.getOwnPropertyDescriptor(object, prop);

    proxyUnsafeMethod(descriptor, 'set');

    Object.defineProperty(object, prop, descriptor);
}

Answer 3

Angular動態地為HTML-repeat和其他指令添加HTML注釋標記<!-- --> 。 不幸的是，當使用element.innerHTML從javascript輸入時，Microsoft認為這些是不安全的，因此是不允許的。

解決方法是修改實際的angular.js文件並在MSApp.execUnsafeLocalFunction();包裝所有element.innerHTML調用MSApp.execUnsafeLocalFunction();

在我正在使用的Angular版本中，這是第2539行和第2162行

2539行：

MSApp.execUnsafeLocalFunction(function() { element.innerHTML = value; });

2162行：

MSApp.execUnsafeLocalFunction(function() { div.innerHTML = '<div>&#160;</div>' + element });

最好的方法是在angular.js文件中搜索innerHTML的所有實例並將其包裝起來。

Answer 4

在很多情況下，您遇到動態內容問題時， Winstore-jsContrib可能會有所幫助。 只需在應用程序的開頭添加.js文件，就可以了。