iPhone Safari Web App이 새 창에서 링크를 엽니 다

홈 화면에 아이콘을 추가 한 후 웹에 문제가 있습니다. 웹이 홈 화면에서 시작되면 모든 링크가 Safari의 새 창에서 열리고 전체 화면 기능이 손실됩니다. 어떻게 방지 할 수 있습니까? 나는 아무런 대답도 찾지 못했습니다. 답이없는 동일한 질문 만.

iWebKit 프레임 워크 에서 JavaScript 솔루션을 찾았습니다 .

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
    a[i].onclick=function()
    {
        window.location=this.getAttribute("href");
        return false
    }
}

여기에있는 다른 솔루션은 외부 링크 (Safari에서 외부 적으로 열려고 함)를 고려하지 않거나 상대 링크 (도메인이없는)를 고려하지 않습니다.

html5 mobile-boilerplate 프로젝트는이 요점에 연결되어 있으며 https://gist.github.com/1042026

그들이 작성한 최종 코드는 다음과 같습니다.

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

jQuery를 사용하는 경우 다음을 수행 할 수 있습니다.

$("a").click(function (event) {
    event.preventDefault();
    window.location = $(this).attr("href");
});

이것은 iOS 6.1 및 Bootstrap JS 링크 (예 : 드롭 다운 메뉴 등)에서 작동합니다.

$(document).ready(function(){
    if (("standalone" in window.navigator) && window.navigator.standalone) {
      // For iOS Apps
      $('a').on('click', function(e){
        e.preventDefault();
        var new_location = $(this).attr('href');
        if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
          window.location = new_location;
        }
      });
    }
  });

이것은 오래된 질문이며 여기에있는 많은 솔루션이 자바 스크립트를 사용하고 있습니다. 그 이후로 iOS 11.3이 출시되었으며 이제 scope 멤버를 사용할 수 있습니다 . 범위 멤버는 "/"해당 범위 아래의 모든 경로가 새 페이지를 열지 않는 URL 입니다.

범위 멤버는이 웹 응용 프로그램 응용 프로그램 컨텍스트의 탐색 범위를 나타내는 문자열입니다.

내 예는 다음과 같습니다.

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en-US",
  "start_url": "/",
  "scope": "/",
  ...
}

자세한 내용은 여기를 참조 하십시오 . 또한 이 기능을 제공 할 생성기 를 사용하는 것이 좋습니다 .

범위를 지정하면 모든 것이 Android와 유사하게 예상대로 작동하며 범위를 벗어난 대상은 Safari에서 열릴 수 있습니다 (상태 표시 줄의 작은 항목).

Davids 답변 및 Richards 의견에 따라 도메인 확인을 수행해야합니다. 그렇지 않으면 다른 웹 사이트에 대한 링크도 웹 응용 프로그램에 열립니다.

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    if (href.indexOf(location.hostname) > -1)
    {
        event.preventDefault();
        window.location = href;
    }
});

jQuery Mobile을 사용하는 경우 data-ajax = 'false'속성을 사용할 때 새 창이 나타납니다. 실제로, 이것은 $ .mobile.ajaxEnabled 설정에 의해 또는 target = ''속성에 의해 ajaxEnabled가 꺼지고 외부 링크에 의해 또는 외부 링크에 의해 발생할 때마다 발생합니다.

이것을 사용하여 고칠 수 있습니다.

$("a[data-ajax='false']").live("click", function(event){
  if (this.href) {
    event.preventDefault();
    location.href=this.href;
    return false;
  }
});

(live () 메소드에 대해 Richard Poole에게 감사합니다-bind ()와 함께 작동하지 않았습니다)

전역 적으로 ajaxEnabled를 끈 경우 [data-ajax = 'false']를 삭제해야합니다.

실제로 새 창을 금지하는 Ajax 연결 인 jQuery Mobile 관련 문제가 될 것으로 예상했기 때문에 다소 오래 걸렸습니다.

이 코드는 iOS 5에서 작동합니다.

헤드 태그에서 :

<script type="text/javascript">
    function OpenLink(theLink){
        window.location.href = theLink.href;
    }
</script>

같은 창에서 열려고하는 링크에서 :

<a href="(your website here)" onclick="OpenLink(this); return false"> Link </a>

이 주석 에서이 코드를 얻었습니다 : iphone web app meta tags

target이 명시 적으로 "_blank"로 설정된 경우 새 창에서 링크를 열도록 허용해야 할 수도 있습니다.

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    // prevent internal links (href.indexOf...) to open in safari if target
    // is not explicitly set_blank, doesn't break href="#" links
    if (href.indexOf(location.hostname) > -1 && href != "#" && $(this).attr("target") != "_blank")
    {
        event.preventDefault();
        window.location = href;
    }

});

독립형 WebApp에서만 실행되고 jQuery없이 작동하며 간단하고 iOS 8.2에서 테스트 되었기 때문에 매우 완벽하고 효율적인 것을 발견했습니다.

독립형 유지 : Mobile Safari를 여는 독립형 웹 앱의 링크 방지

거의 정상적으로 연결하는 것도 가능합니다 :

<a href="#" onclick="window.location='URL_TO_GO';">TEXT OF THE LINK</a>

또한 해시 태그와 href를 제거하여 모양에 영향을 미치는 모든 것을 제거 할 수 있습니다.

이것은 iOS 6에서 나를 위해 일한 것입니다 (rmarscher의 답변에 대한 약간의 적응).

<script>                                                                
    (function(document,navigator,standalone) {                          
        if (standalone in navigator && navigator[standalone]) {         
            var curnode,location=document.location,stop=/^(a|html)$/i;  
            document.addEventListener("click", function(e) {            
                curnode=e.target;                                       
                while (!stop.test(curnode.nodeName)) {                  
                    curnode=curnode.parentNode;                         
                }                                                       
                if ("href" in curnode && (curnode.href.indexOf("http") || ~curnode.href.indexOf(location.host)) && curnode.target == false) {
                    e.preventDefault();                                 
                    location.href=curnode.href                          
                }                                                       
            },false);                                                   
        }                                                               
    })(document,window.navigator,"standalone")                          
</script>

이것은 뒤로 버튼을 막는 Sean의 약간 적응 된 버전입니다.

// this function makes anchor tags work properly on an iphone

$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
  // For iOS Apps
  $("a").on("click", function(e){

    var new_location = $(this).attr("href");
    if (new_location != undefined && new_location.substr(0, 1) != "#" && new_location!='' && $(this).attr("data-method") == undefined){
      e.preventDefault();
      window.location = new_location;
    }
  });
}

});

Twitter Bootstrap 및 Rails 3 사용자

$('a').live('click', function (event) {
  if(!($(this).attr('data-method')=='delete')){
    var href = $(this).attr("href");
    event.preventDefault();
    window.location = href; 
  }   
});

삭제 링크는 여전히 이런 식으로 작동합니다.

target = "_ blank"가있는 링크를 제외한 독립형 웹앱 모드 내에서 모든 링크를 여는 것을 선호합니다. 물론 jQuery를 사용합니다.

$(document).on('click', 'a', function(e) {
    if ($(this).attr('target') !== '_blank') {
        e.preventDefault();
        window.location = $(this).attr('href');
    }
});

iOS 웹 앱에 사용 된 한 가지 해결 방법은 모든 링크 (CSS의 버튼)를 제출 버튼으로 만들었습니다. 그래서 대상 링크에 게시 된 양식을 연 다음 type = "submit"을 입력하십시오. 가장 좋은 방법은 아니지만이 페이지를 발견하기 전에 알아 낸 것입니다.

@rmarscher의 답변 에서 bower 설치 가능 패키지를 만들었습니다 .

http://github.com/stylr/iosweblinks

Bower를 사용하여 스 니펫을 쉽게 설치할 수 있습니다. bower install --save iosweblinks

를 사용 JQuery Mobile하는 경우 위의 솔루션이 팝업 대화 상자를 중단합니다. 그러면 webapp 내에 링크가 유지되고 팝업이 허용됩니다.

$(document).on('click','a', function (event) {
    if($(this).attr('href').indexOf('#') == 0) {
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

또한 다음과 같이 할 수 있습니다.

$(document).on('click','a', function (event){
    if($(this).attr('data-rel') == 'popup'){
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

다음은 페이지의 모든 링크에 사용하는 것입니다 ...

document.body.addEventListener(function(event) {
    if (event.target.href && event.target.target != "_blank") {
        event.preventDefault();
        window.location = this.href;                
    }
});

jQuery 또는 Zepto를 사용하는 경우 ...

$("body").on("click", "a", function(event) {
   event.target.target != "_blank" && (window.location = event.target.href);
});

이 메타 태그를 간단히 제거 할 수 있습니다.

<meta name="apple-mobile-web-app-capable" content="yes">