Question

我想使用离子构建我的网页的移动版本。我计划通过在iframe中加载我的ifpage网页来实现这一目的：

<iframe src="http://www.mywebsite.com" />

但问题是我想要隐藏iframe中加载的一些元素。我尝试将css类应用于iframe并关闭元素的可见性，但显然，我无法将css应用于iframe的子代。如果它是一个网页，我可以编写一个jquery方法来隐藏元素。但我怎样才能在离子中实现这一目标呢？

Answer 1

如果http://www.mywebsite.com是您的网站，则可以添加javascript以隐藏某些元素，如果在mywebsite.com本身的iframe中。

注意：这假设您总是希望隐藏它，如果它在iframe中。

Answer 2

您可以尝试以下

<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>

Answer 3

在www.mywebsite.com网站上，您需要添加以下javascript函数

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, ' '));
}

然后在您的离子应用程序中，要调用嵌入在get调用中的javascript方法，如下所示。

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

改变离子中iframe的iframe含量

3 个答案: