I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information followed by an iframe containing the service content:
<table width="100%" style="padding: 0px;">
<tr>
<td align="right" style="padding: 0px;">
<i class="fa fa-wifi" style="color:gray;"> {{ some stuff}}</i>
</td>
</tr>
</table>
<iframe id="serviceIframe" width="100%" height="100%" frameborder="0" src="http://localhost:{{port}}/{{page}}" target="_self"/>
Everything is functioning correctly, but I have encountered an issue where if a user clicks "open in a new tab" on any links within the iframe, it redirects to http://localhost:{{port}}/{{page}}, instead of the service.html page, causing the desired content to be lost.
Is there a way to ensure that when a user clicks "open in a new tab" on a link inside the iframe, it will redirect to my service.html page rather than http://localhost:{{port}}/{{page}}?
Thank you and apologies if my explanation was not clear.