响应时需要将 iframe 转换为链接答案

【问题标题】：need to convert iframe to link when responsive响应时需要将 iframe 转换为链接
【发布时间】：2018-07-02 05:23:33
【问题描述】：

我的网站上有 iframe，看起来像

<iframe class="frame" src="http://www.example.com" width="717" height="553"> </iframe>

我需要把它转换成

<a class="frame" href="http://www.example.com">VISIT NOW</a>

在智能手机上响应时

有什么办法吗？

【问题讨论】：

向我们提供所需结果的图片会很好。一张图纸或任何可以向我们展示想要的最终结果的东西。

标签： javascript jquery html iframe hyperlink

【解决方案1】：

您可以使用@media 查询，例如：

@media (max-width: 600px) {
  a.frame {
    display: block;
  }
  iframe.frame {
    display: none;
  }
}

@media (min-width: 600px) {
  a.frame {
    display: none;
  }
  iframe.frame {
    display: block;
  }
}

如果您使用引导程序，您可以在当前代码中添加一些类（此代码适用于引导程序 4）：

<iframe class="frame d-none d-md-block" src="http://www.example.com" width="717" height="553"> </iframe>

<a class="frame d-block d-md-none" href="http://www.example.com">VISIT NOW</a>

【讨论】：

【解决方案2】：

同时创建 iframe 和锚标记。然后为它们每个赋予不同的 CSS 类，使用媒体查询来隐藏和显示。您可以根据需要更改媒体宽度

.mobile-show {display:none;}

@media only screen and (max-device-width:480px){
       .mobile-hide {display:none;}
       .mobile-show {display:block !important;}
    }

    <iframe class="frame mobile-hide" src="http://www.example.com" width="717" height="553"> </iframe>
    <a class="frame mobile-show" href="http://www.example.com">VISIT NOW</a>

【讨论】：

【解决方案3】：

将您的 iframe 放入 div 标签中，例如

<div id="frameID">
   <iframe class="frame" src="http://www.example.com" width="717" height="553"> </iframe> 
</div>

使用 javaScript 你可以做类似的事情

<script>
var element = document.getElementById("frameID");
if($(window).width() <= 768) {
element.innerHTML = "<a class='frame' href='http://www.example.com'>VISIT NOW</a>";
}else{
element.innerHTML = "<iframe class='frame' src='http://www.example.com' width='717' height='553'> </iframe>";
}
</script>

使用 CSS 媒体查询

@media (max-width: 768px) {
  #frameID a.frame {
    display: block;
  }
  #frameID iframe.frame {
    display: none;
  }
}

@media (min-width: 768px) {
  #frameID a.frame {
    display: none;
  }
  #frameID iframe.frame {
    display: block;
  }
}

如果你使用的是 bootstrap3

<iframe class="frame hidden-xs hidden-sm" src="http://www.example.com" width="717" height="553"> </iframe>
<a class="frame hidden-md hidden-lg" href="http://www.example.com">VISIT NOW</a>

【讨论】：