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代码中出现的方法。我修改了小提琴并使用了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', '')}`

Answer 2

正在发生的事情是AngularJS操纵地址栏中的网址，您使用$location阅读了该网址。

因此，在您阅读网址并将其放入iframe ngSrc后，但当角度操纵地址栏中的原始网址时，问题就不会发生。因此，您可以使用decodeURIComponent()

手动解码它

return $sce.trustAsResourceUrl(decodeURIComponent(val));

Angular在ng-src中对url进行编码并替换＆＃39; /＆＃39;与％2F和＆＃39;？＆＃39;与％3F

2 个答案: