ios 는 iframe 의 완벽 한 해결 방법 을 지원 하지 않 습 니 다(iOS&안 드 로 이 드 호 환)

최근 에 위 챗 공식 페이지 를 만 들 었 는데 입구 가 다 르 기 때문에 공공 페이지 를 추출 한 다음 에 서로 다른 값 에 따라 배경 에 다른 입구 로 전달 해 야 한다.처음에 iframe 페이지 를 끼 워 넣 었 지만 iOS 시스템 이 iframe 끼 워 넣 은 페이지 의 높이 와 포 지 셔 닝 제어 가 제대로 되 지 않 은 것 을 발 견 했 습 니 다.구체 적 으로 는 끼 워 넣 은 하위 페이지 의 높이 가 부모 페이지 의 높이 보다 크 고 하위 페이지 에 폭탄 상자 사건 이 발생 했 을 때 하위 페이지 의 높이 가 부모 페이지 의 높이 보다 훨씬 크 면탄 상자 가 찾 을 수 없 는 상황 이 발생 할 수 있 습 니 다.사실은 시점 이하 일 수 있 습 니 다.탄 상자 의 위 치 는 하위 페이지 에 비해 위치 할 뿐 시점 에 비해 위치 하지 않 습 니 다.
여러 가지 방법 을 시 도 했 지만 모두 이상 적 이지 않 았 고 안 드 로 이 드 시스템 은 좋 은 성적 을 보 였 다.그래서 iOS 시스템 은 페이지 를 직접 돌 릴 수 있 고 안 드 로 이 드 시스템 은 iframe 을 정상적으로 사용 할 수 있다 고 생각 했다.
코드 직접 보기:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>    </title>
</head>

<body>
  <script src="js/zepto.min.js"></script>
  <script>
  $(function() {
    var originId = sessionStorage.setItem('originId', '3'); //originId              
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android  
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios  
    if (isAndroid) {
      //      iframe
      var winH = $(window).height();
      var iframe = document.createElement('iframe');
      iframe.src = "index_common.html";
      iframe.style.width = '100%';
      iframe.style.height = winH + 'px';
      iframe.style.border = '0 none';
      iframe.setAttribute('scrolling', 'auto');
      document.body.appendChild(iframe);
    } else if (isiOS) {
      //iOS        
      location.href = 'index_common.html';
    } else {
      location.href = 'index_common.html';
    }
  })
  </script>
</body>

</html>
이상 의 이 ios 는 iframe 의 완벽 한 해결 방법(iOS&안 드 로 이 드 호 환)을 지원 하지 않 습 니 다.바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.

좋은 웹페이지 즐겨찾기