I want to build a mobile version of my webpage using ionic. I am planning to do so by loading my webpage on iframe in a view like so:
<iframe src="http://www.mywebsite.com" />
But the problem is that I want to hide some elements loaded in the iframe. I tried applying css class to iframe and turning off visibility of the element but apparently, I cannot apply css to children of iframe. If it were a web page, I could just write a jquery methods to hide the element. But how can I achieve this in ionic?
If http://www.mywebsite.com is your website, you could add the javascript to hide some elements if in an iframe to mywebsite.com itself.
Note: This assumes that you always want to hide it if it is in an iframe.
You can try the following
<ion-view title="News" hide-nav-bar="true" class="has-header">
<ion-content class="has-header" padding="false">
<iframe src="http://www.mywebsite.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support IFrames
</iframe>`
</ion-content>
</ion-view>