javascript - Angular 在 ng-src 中对 url 进行编码，并将 '/' 替换为 %2F，将 '?' 替换为 %3F

Question

我有一个带有 URL 的 Kibana 仪表板:

/logquery/app/kibana#/dashboard/Some-Dashboard?someParameters

我有一个 Web 应用程序，我试图将上面的仪表板嵌入到 <iframe> 中. web应用中的url如下

/dashboards/logquery/app/kibana#/dashboard/Some-Dashboard?someParameters

在 AngularJs 中，我正在做:

ctrl.dashboardUrl = $location.url().replace('/dashboards', '');

在我看来:

<div ng-controller="DashboardCtrl as ctrl">
    <div class="iframe-container">
        <iframe ng-src="{{ctrl.dashboardUrl | trustAsUrl}}"
                height="100%"
                width="100%"
                ng-cloak
                frameborder="0"
                marginheight="0"
                marginwidth="0"></iframe>
    </div>
</div>

trustAsUrl过滤器如下:

filtersGroup.filter('trustAsUrl', [
    '$sce',
    function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

我有:

$locationProvider.html5Mode({
                enabled: true,
                requireBase: false,
                rewriteLinks: false
            });

这会导致 / /kibana# 之后的字符替换为 %2F和 ?与 %3F这导致 Kibana 无法找到请求的仪表板。

我该如何克服这个问题？谢谢!

Answer 1

问题似乎出在 vsprintf 方法上，您在问题陈述中遗漏了该方法，但出现在 fiddle 中代码。我修改了 fiddle 并使用 javascript 字符串插值代替 PHP vsprintf 方法，它返回正确的 URL。

修复:

之前

vsprintf("%s://%s/%s", [$location.protocol(), $location.host(), $location.url().replace('/dashboards', '')]);

之后

ctrl.dashboardUri = `${$location.protocol()}://${$location.host()}/${$location.url().replace('/dashboards', '')}`