Osadź aplikację angularjs w innej aplikacji angularjs

Question

Próbuję osadzić grafana w mojej aplikacji angularjs. Mogę to zrobić z prostą ramką iframe, ale moja aplikacja używa jwt do uwierzytelniania i nie mogę znaleźć sposobu na ustawienie nagłówka dla elementu iframe. Potwierdziłem, że działa doskonale, gdy wyłączam uwierzytelnianie z podstawową ramką iframe, ale muszę ją włączyć w produkcji.

Próbowałem również użyć $http, aby uzyskać grafmowy html (w ten sposób mogę ustawić mój nagłówek jwt), ale js nie działa przy użyciu tej metody. Zakładam, że jest to związane z bootstrapem, ponieważ bootstrap ręcznie.

//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() 
    }) 

Czy istnieje inny sposób ustawienia nagłówka na elemencie iframe? Próbowałem też po prostu używać html grafana jako szablonu, ale jak już powiedziałem przed ich bootstrap wydaje się nie działać w innej aplikacji.

Answer 1

Ty cantry to w ten sposób, to powinno działać:

$.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)) 
    } 
});