Navbar on External Page

I have some pages that are not part of the app. (example:
Ok sure, you can just simply add “link external” class.

However, I would like to have a navbar on top of the external page.

Something like this below. With close button in case,user wants to go back to the app.
it doesnt look like external page. How to achieve this. thank you!

Update: I asked ChatGPT for answer and its answer was almost correct. The problem is that, ChatGPT’s knowledge is cut off on September 2022. That means it is not updated with V8. What it know is tho

the code gave me but there was uncaught error.
can anyone improve the code below? Thank you.

$('.link.external').on('click', function () {
  var url = $(this).attr('href');
  var navbar = '<div class="navbar"><div class="navbar-inner"><div class="left"><a href="#" class="link back"><i class="icon icon-back"></i><span>Back</span></a></div><div class="title">External Page</div><div class="right"></div></div></div>';
  var iframe = '<iframe class="external-page" src="' + url + '"></iframe>';

  var dynamicPage = app.views.create('.view-main', { stackPages: true }).router.load({ content: navbar + iframe });
  dynamicPage.once('pageMounted', function () {
    $('').on('click', function () {

  return false;