Home > Article > Web Front-end > How to solve the problem that iframe is not supported on ios?
There are many weird problems with iframes, and many Android phones are not normal.
It is not recommended to use iframe on the app.
Double webview is safer, that is, load the page you originally placed in the iframe into a webview and append it to the main page
The specific performance is that when the height of the nested subpage is greater than the parent page The height of the page, and a pop-up event is triggered in the sub-page. At this time, if the height of the sub-page is much greater than the height of the parent page, there will be a situation where the pop-up cannot be found. In fact, it may be below the viewport. The position is only positioned relative to the subpage, not relative to the viewport. I tried many methods, but none were ideal, and the Android system performed well, so I thought that the iOS system can directly jump to the page, while the Android system uses iframe normally (if the Android system directly jumps the page, there will be problems, That is, when the physical return key is pressed, the content of the previous form submission page cannot be cleared normally, and if multiple forms are nested, the corresponding fields will be confused, so use iframe). Look at the code directly:
<!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?1.1.11"></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) {//安卓终端使用iframevar 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>
I have been working on it for a long time and recorded my growth. If you have friends who encounter similar problems, you can take a look. I also hope to see areas that can be improved. Please give me some advice.
The above is the detailed content of How to solve the problem that iframe is not supported on ios?. For more information, please follow other related articles on the PHP Chinese website!