javascript - 将 angularjs 应用程序嵌入另一个 angularjs 应用程序

Question

我正在尝试将 grafana 嵌入到我的 angularjs 应用程序中。我可以使用简单的 iframe 轻松完成，但我的应用程序使用 jwt 进行身份验证，我找不到为 iframe 设置 header 的方法。当我使用基本 iframe 关闭身份验证时，我已经确认它工作得很好，但我需要启用它才能在生产中使用。

我也尝试过使用 $http 获取 grafana html(这样我可以设置我的 jwt header )但是 js 似乎无法使用此方法。我认为这与引导有关，因为它们是手动引导的。

//iframe
<iframe id="grafana" layout-fill flex></iframe>

//controller
  $http.get('/grafana/dashboard').then(function(response) {
      var iframeDocument = document.getElementById('grafana').contentWindow.document
      iframeDocument.open('text/html', 'replace')
      iframeDocument.write(response.data)
      iframeDocument.close()
  })

还有其他方法可以在 iframe 上设置 header 吗？我也尝试过只使用 grafana 的 html 作为模板，但正如我之前所说，他们的引导似乎无法在另一个应用程序中工作。

Answer 1

你可以这样尝试，它应该可以工作:

$.ajax({
    type: "GET", 
    url: "/grafana/dashboard",
    contentType: "application/json",
    beforeSend: function(xhr, settings){
            xhr.setRequestHeader("some_custom_header", "foo");},
    success: function(data){
        $("#output_iframe_id").attr('src',"data:text/html;charset=utf-8," + escape(data))
    }
});