0

I would like to develop a office 365 mail add-in (Read app) for outlook web & other clients, I have give a quick start with sample provided at napacloudapp.com, which works fine as expected.

But I would like host a already developed SPA with minor changes, which I did and hosted by configuring metadata file.

As I know all available SPA templates using some routing plugin, which is responsible to change the route & app will load view based on route available in url(followed by '#' character by default in url)

But when i clicked on a navigation link to change the hash location & to load new content based on changed route, it is not working because requested route were formed incorrectly, because in outlook web app, our app is loading under iframe & iframe src contains # in url, which causes the wrong url formation. Iframe rendered in outlook web app is as follows 

<iframe id="ocii1" width="100%" height="100%" frameborder="0" title="App for Office" sandbox="allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups" name="_xdm_0__ocii141675079_65831848_1436538340692" src="https://localhost:44301/Index.html?et=&amp;_host_Info=Outlook|Web|16.00#&amp;_xdm_Info=52741ef1_5cb5874_1436538340692|ocii1|https://outlook.office365.com/owa/?realm=mycompany.com#path=/mail"></iframe>

Can anyone help me in this?

enter image description here

Hitendra
  • 329
  • 2
  • 17

2 Answers2

0

It is not recommended to use iframes in office add-ins. use html/css/js to populate your standard web app content in office add-in project.

hope this helps.

Mostafa
  • 3,296
  • 2
  • 26
  • 43
  • I am not using any iframe, iframe code that i attached is added by office 365 itself to host our developed app. – Hitendra Jul 11 '15 at 20:01
0

Finally found a workaround for this, create a intermediate page & configure this as startup page in metadata & than navigate to target location. Added following code to intermediate page. 

Office.initialize = function (reason) {
    $(document).ready(function () {
        location.href = "https://localhost/mailApp";
    });
};

It will resolve the extra '#' problem in src of mail app iframe, by replacing complete src with "https://localhost/mailApp".

Hitendra
  • 329
  • 2
  • 17