Translate

[Android] Android 2.x 버전의 Browser에서 iframe 내의 페이지에서 window.open 했을 때 새창이 아니라 팝업이 뜨는경우

날짜:





증상

 OS: Android 2.x
Browser: OEM(default) Browser

iframe 내의 페이지에서 window.open 함수를 사용할 시 새창 또는 탭(tab)이 아니라 popup으로 표시가 된다.

아래의 모습처럼..









문제가 되는 소스는 다음과 같다.


outer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
        }
        #wrapperDiv {
            width: 90%;
        }
    </style>
</head>
<body>

<br/><br/>
<div id="wrapperDiv">
    <iframe src="./sampleMessages/00/index.html" width="100%" />
</div>



</body>
</html>




index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button type="button" onclick="window.open('http://nate.com/', '_blank');">네이트</button>

</body>
</html>







원인 및 해결방법

원인: Android 2.x 버그로 추측

해결방법
1. iframe 의 width 사이즈가 body의 사이즈와 같아야 한다. (100%)
2. html, body에 margin 사이즈 0 이 설정되어야 한다.


다음의 소스를 확인해 보면 알 수 있다.




outer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
        }
        #wrapperDiv {
            width: 100%;
        }
    </style>
</head>
<body>

<br/><br/>
<div id="wrapperDiv">
    <iframe src="./sampleMessages/00/index.html"
            width="100%" />
</div>



</body>
</html>


또는 다음과 같이 해도 된다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
        }
    </style>
</head>
<body>

<br/><br/>
<iframe src="./sampleMessages/00/index.html"
        width="100%" />



</body>
</html>





결론은 iframe의 사이즈가 width="100%" 가 되어야 하며
iframe을 감싸고 있는 다른 Element 의 사이즈 또한 100%가 되어야 한다.

 슬프게도 대부분의 사이트에서는 이렇게 간단한 페이지가 별로 없을테니
적용하기가 힘들다.

이번에 작업하는 2개의 페이지중에 1개의 페이지가 너무나도 심플하여
위와같이 해결을 했으나 다른 페이지는 DOM 구조가 복잡하다보니
적용이 어려워 일단 그냥 넘어가고 다른 이슈를 보기로 했다.







댓글

댓글 쓰기