Ionic - Best practise to embed external HTML docs / iframe

Hi,

i am working on a b2b classified app where the ads are based on static html docs.
It is powered by multiple databases, elasticsearch etc. but the classified itself is a user/customer generated static html doc with a width of 740 and height of max 1200px.

Where i am really struggling with is the correct implementation of those static docs, since they are not responsive and i have to keep their company design when displaying them.

What i tried is to display the docs with a modal and embedded iframe, like this:

header...

<ion-content>
  <div #frame style="width:100%;height:100%;overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
    <iframe [src]="adURL" class="iframe" scrolling="yes" ></iframe>
  </div>
</ion-content>

footer...

That almost works right, the docs are rendered nicely and the iframe is scrollable.
But because of the large size of the docs i need to make this somehow zoomable in a user friendly way.

My idea was to make use of the Gesture module and to add some functionality to zoom the iframe content.
With a first test i added the module and some logger like this:

    this.gesture.on('pinch', e => console.log(e));
    this.gesture.on('pan', e => console.log(e));

This did not really work. Sometimes i have got some event output, but most time there was nothing happening (tested on ios).

So i am wondering if there is might be another solution to make the iframe zoomable?
Since i am no iframe fan, i did try the inapp browser too, but even there it wasnt zoomable and this seems not be able to be embedded to display header/footers that include some related functionality.

I hope someone can give me a hint how to solve this :slight_smile:

Regards
Stefan

I would consider doing the rendering server-side and simply displaying these ads as PNG or SVG images.

1 Like