[英]IFrame scrolls on desktop browsers but not on iphone
以下是一些示例代碼，這些示例代碼將iframe加載到頁面中，然后iframe代碼使用javascript調用-window.scrollTo（0,170）進行滾動。
一切在桌面瀏覽器（如mozilla，chrome，safari等）上都可以正常運行，但是當我在iPhone上嘗試使用時，滾動代碼（window.scrollTo（0,170）;）不起作用。 所有文件都駐留在同一服務器上。
當它工作時，您會看到頁面已加載，並已向上滾動到第9行。當它不工作時，頁面加載但沒有任何滾動。
關於我在做什么錯或為什么它不起作用的任何想法？ 在此先感謝您的反饋：）
ifparent.html
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
background: #ffffff;
height: 75%;
}
.scroll_frame {
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling:touch;
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
.my_frame {
width: 100%;
height: 100%;
border: none;
vertical-align: top;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="frame_holder">
<div id="scroll_frame" class="scroll_frame">
<iframe class="my_frame" src="iframe.html"></iframe>
</div>
</div>
</body>
</html>
<script type="text/javascript">
</script>
iframe.html
<html>
<head>
<title>IFRAME</title>
</head>
<body onload="scroll_window()">
1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
</body>
</html>
<script type="text/javascript">
function scroll_window() {
window.scrollTo(0,170);
}
</script>
我能夠找到該問題的解決方案，因此我決定將其發布，以防其他任何人遇到此問題。 以下是所做的更改，因此滾動也可在iOS瀏覽器中使用。
在上面的ifparent.html中，添加以下代碼：
<script type="text/javascript">
window.onload = scroll_window;
function scroll_window() {
//If IOS the scroll bar seemes to bee assigned to the container div (scroll_frame) in the parent window.
//So you need to scroll scroll_frame in the parent window. This will scroll to line 16.
var objDiv = document.getElementById("scroll_frame");
objDiv.scrollTop = 500;
}
</script>
如果是iOS ，則滾動條似乎已分配給父窗口中的容器div（scroll_frame）。 因此，您需要在父窗口中滾動（scroll_frame）div。 這將滾動到第26行。
如果是Windows或Mac OS ，則滾動條似乎已分配給iframe中的window元素。 因此，您需要從iframe中滾動iframe窗口。 這將滾動到第9行。
倒數計時適用於台式機和Android瀏覽器，但不適用於iPhone
[英]Countdown works on desktop and android browsers, but not iPhone
自定義字體圖標在iPhone瀏覽器上顯示不正確，但在任何桌面上看起來都很好
[英]Custom font icons displayed incorrectly on iPhone browsers, but on any desktop looks fine
在Ipad2和iphone4上顯示兩次字體 - 在其他桌面瀏覽器上正常工作
[英]Font displayed twice on Ipad2 and iphone4 - working fine on other desktop browsers
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.