Maintaining Header when Opening Link in InAppBrowser

Question

I'm using ionic framework to develop native app. Here, I'm having default header in all the pages. When switching over to second page, I need in-app browser to view the external content.

So, I used window.open

 <a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>

But, I need the header to be constant when I am viewing the content in in-app browser.

Is it possible in ionic framework? I don't need iframe for this. It is heavy weighted in html.

Updated:

I m having a html file which I m injecting to iframe. like

<div id="header"></div>
<iframe src="serveraddress/index.html"></iframe> 

Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.

Answer 1

EDIT

I had disregarded the in-app browser element in your question. Here is an update, specifically for in-app browser.

DISCLAIMER: none of the code provided below has been tested; however, this answer gives you guidelines to implement your solution.

Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.(...)Header needs to be constant when I'm viewing external website content.

When you use in-app browser:

<a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>

it opens a popup which displays the requested URL.

You would like to have your own header displayed in the in-app browser window. I see two ways to do this:

A) You could customise the webpage you want to display in your in-app browser beforehand, and store it on your server.

The customised webpage could have included some third party HTML, using one of the 4 techniques mentioned below. See techniques 1, 2a, 2b and 2c.

Say you store a customised webpage on your server which is like so:

<div id="header"></div>
<div id="main"></div>

The page is stored on your own server, at url: www.myserver.com

If you make your in-call like: window.open('http://www.myserver.com',...) you would display your customised page, with your own headers.

B) You could fetch the third party webpage with in-app browser, keep it hidden, modify it, then display it

Please read this Cordova doc page.

• To open a window and keep it hidden:

  var ref = window.open(url, target,'hidden=yes');

• To execute a script when the hidden in-app window is ready:

  var iabRef = null;
  function insertMyHeader() {
  iabRef.executeScript({
      code: "var b=document.querySelector('body'); var a=document.createElement('div');document.createTextNode('my own header!'); a.appendChild(newContent);b.parentNode.insertBefore(a,b);"
  }, function() {
      alert("header successfully added");
  });
  }
  function iabClose(event) {
       iabRef.removeEventListener('loadstop', replaceHeaderImage);
       iabRef.removeEventListener('exit', iabClose);
  }
  
  function onDeviceReady() {
   iabRef = window.open('http://apache.org', '_blank', 'location=yes');
   iabRef.addEventListener('loadstop', insertMyHeader);
   iabRef.addEventListener('exit', iabClose);
  }
  

• Now you can show the in-app window: ref.show();

---

APPENDIX: 4 techniques to use third-party content in your apps:

---

1. If the third-party website provides an API (complex solution, but entirable configurable)

e.g. Bing Search API

Some websites provide an API, which responds with bare information, usually returned in the form of a JSON string.

You can use a JavaScript templator like Mustache to create your HTML from the JSON response you got, either server-side or client side. Then you open your popup:

<div id="header"></div>
<div id="myTemplatedHTML"></div>

If you go for the client-side option, I suggest you read open window in javascript with html inserted

---

2a. If the third-party website does not provide an API: cross-site javascript call

Please read this thread: Loading cross domain html page with jQuery AJAX

You would have in your HTML:

<div id="header"></div>
<div id="myLoadedHTML"></div>

And the myLoadedHTML would be filled with HTML fetched from the third-party website.

I recommend to use a tool like YQL to fetch the HTML. YQL will let you make complex queries to fetch just the bits of HTML you need.

---

2b. If the third-party website does not provide an API: embed

Please check this thread: alternatives to iframes with html5

It reads that: if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do

It also mentions the embed tag:

<embed src="http://www.somesite.com" width=200 height=200 /></embed>

In your case, you could probably achieve your goal with something like:

<div id="header"></div>
<embed src="http://www.somesite.com" width=200 height=200 /></embed>

---

2c. If the third-party website does not provide an API: iframe

Alternatively, should you want to display a third-party website in an iframe, and then modify the display with your own content, I suggest you check this StackOverflow thread: Cannot modify content of iframe, what is wrong?

In your particular case, say you named your iframe myIframe:

<iframe src="serveraddress/index.html" id="myIframe"></iframe>

You could then achieve your goal with something like this:

$(document).ready(function(){
    $('#myIframe').ready(function(){
        $(this).contents().find('body').before('<div id="header"></div>');
    });
});​