CODEWITHSUNDEEP
jquerycssiframeionic-framework
Eddard Stark
Eddard Stark

Reputation: 3595

Change iframe contents of iframe in ionic

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?

Upvotes: 1

Views: 3467

Answers (3)

MoleIsKing
MoleIsKing

Reputation: 141

On the www.mywebsite.com website you need to add the following javascript function

window.onload = function () {  
 if (document.readyState === 'complete') {     
  if (getParameterByName('showElement') == "false") { 
   hideElement();       
  } 
 }
}

function hideElement() {    
 var element = document.getElementsByClassName("element-class-to-hide")[0];
 element.style.display = 'none';
}

function getParameterByName(name, url) {
 if (!url) url = window.location.href;
 name = name.replace(/[\[\]]/g, '\\$&');
 var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
 results = regex.exec(url);
 if (!results) return null;
 if (!results[2]) return '';
 return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Then in your ionic app you want to call that javascript method that is embedded in the get call as below.

<ion-content>
 <iframe src="http://www.mywebsite.com?showElement=false"/>
</ion-content>

Upvotes: 1

LeRoy
LeRoy

Reputation: 4436

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>

Upvotes: 0

Nikhil Agarwal
Nikhil Agarwal

Reputation: 412

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.

Upvotes: 1

Related Questions