响应式网站通过iframe引入其他页面出现的问题?

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .wrap1{width: 320px;height:377px;}
  .wrap2{width: 1370px;height: 553px;}
  iframe{width: 100%;height: 100%;border: none;height: 100%;}
  </style>
</head>
<body>
  <h1>测试</h1>
  <div class="wrap1"><iframe src="currency.html"></iframe></div>
  <div class="wrap2"><iframe src="map.html"></iframe></div>
</body>
</html>

//currentcy.html 页面样式
@media screen and (max-width:767px) {
  .c-width{
    width: auto;
  }
  .custom-til .custom-til-text{
    width: 268px;
  }
  .custom-til-fr{
    display: block;
  }
}
@media screen and (min-width:992px) {
  .currency-container{
    max-height: 377px !important;
  }
}

我们有一个上线的响应式网站,想给首页留几个位置显示其他的数据模块的页面。通过iframe的方式引入。
我做了几个对应的页面也是响应式的,通过css3的@media来控制pc和移动端的显示样式。单独测试没问题,但是放到了iframe里就有问题了,iframe中的currentcy页面并不是按照浏览器的宽度来的,而是根据iframe的实际大小来定的。这个有什么方法解决吗?
原网站有jquery了,我在currentcy页面也要在引入jquery,不然没法使用,为什么iframe里的网页没能用主页面的jquery文件?

已解决 悬赏分:20 - 解决时间 2021-11-23 03:03
反对 0举报 0 收藏 0

回答2

最佳
  • @
    1. iframe的实际大小来定的。这个有什么方法解决吗?

    在你的主页面里再加响应样式,让iframe标签宽度响应

    1. 为什么iframe里的网页没能用主页面的jquery文件?

    跨域问题,不同 jquery 只处理当前页面的内容

    支持 0 反对 0 举报
    2021-11-22 12:42
  • @

    我也遇到了这问题,不过我是iframe在ios手机端的时候出现问题,要使用父类的jq,要使用top.$

    支持 0 反对 0 举报
    2021-11-22 14:00