Question

我正在使用webview组件开发winrt 8.1应用程序。我在webview内容上使用angular。我有一个问题，将图像（html控件）源设置为角度绑定...源由角度控制器注入，我在inage src中获取此前缀：字首：＆＃34;不安全：MS-本地流：// 01010101-0101-0101-0101-0101010101212_64656d6f32＆＃34; 完整路径：不安全：MS-本地流：//01010101-0101-0101-0101-0101010101212_64656d6f32/test.png。如果我要更改＆＃34; test.png＆＃34;使用DOM Explorer手动（删除＆＃34; unsafe＆＃34;前缀） - 然后显示图像。但是当它被注入时，我得到的这个前缀没有显示任何图像，因为在LocalFolder上找不到路径。如何禁用此行为？

通过角度注入图像源。如果源是静态的：它工作，但由于相同的src被注入取代，它获得此前缀... 通常webview受动态内容的限制，当我在WinJS上使用Angular时，我遇到动态html注入问题。

Answer 1

听起来您需要在img标记而不是src中使用ng-src，因为您注入了该值。

换句话说，而不是

<img src="{{hash}}" /> <!-- this won't work as the browser will try to fetch the literal value {{hash}} -->

试试这个

<img ng-src="{{hash}}" /> <!-- this will interpolate {{hash}} before fetching the image -->

（很难说没看到你的代码......）

Answer 2

由于$compileProvider编译了html，你需要告诉$compileProvider你应该允许ms-local-stream://添加src标签，这可以在里面完成$compileProvider.imgSrcSanitizationWhitelist方法。如果未指定清理白名单，则angular将在值中添加unsafe:前缀。您可以在此应用的配置中添加此设置。

<强>标记

<img ng-src="{{url}}" alt="Title"/>

<强>代码

app.config(['$routeProvider', '$compileProvider', 
  function($routeProvider, $compileProvider) {
    //this is for anchor href
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ms-local-stream):/); 
    //this is for img src
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ms-local-stream):/); 
}]);

请参阅SO question。

Webview对动态内容注入的限制

2 个答案: