iPhone Safari Web App เปิดลิงก์ในหน้าต่างใหม่

ฉันมีปัญหากับเว็บหลังจากเพิ่มไอคอนไปที่หน้าจอหลัก หากเว็บเปิดใช้งานจากหน้าจอหลักลิงก์ทั้งหมดจะเปิดในหน้าต่างใหม่ใน Safari (และฟังก์ชันการทำงานเต็มหน้าจอจะหายไป) ฉันจะป้องกันได้อย่างไร ฉันไม่พบความช่วยเหลือใด ๆ มีเพียงคำถามเดียวที่ยังไม่ได้ตอบ

ฉันพบโซลูชัน JavaScript ในกรอบงานiWebKit :

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;
        }
      });
    }
  });

นี่เป็นคำถามเก่าและโซลูชันจำนวนมากที่ใช้ javascript ตั้งแต่นั้นมา iOS 11.3 จะวางจำหน่ายและคุณสามารถใช้สมาชิกขอบเขตได้แล้ว สมาชิกขอบเขตคือ URL เหมือน"/"ที่ทุกเส้นทางภายใต้ขอบเขตนั้นจะไม่เปิดหน้าใหม่

สมาชิกขอบเขตเป็นสตริงที่แสดงขอบเขตการนำทางของบริบทแอปพลิเคชันของเว็บแอปพลิเคชันนี้

นี่คือตัวอย่างของฉัน:

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

นอกจากนี้คุณยังสามารถอ่านเพิ่มเติมได้ที่นี่ ฉันยังแนะนำให้ใช้เครื่องกำเนิดซึ่งจะให้ฟังก์ชั่นนี้

หากคุณระบุขอบเขตทุกอย่างทำงานได้ตามที่คาดหวังเช่นเดียวกับ Android จุดหมายปลายทางที่อยู่นอกขอบเขตจะเปิดใน Safari โดยมีปุ่มย้อนกลับ (เล็ก ๆ ในแถบสถานะ) ไปยัง PWA ของคุณ

จากคำตอบของ 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' ในความเป็นจริงสิ่งนี้จะเกิดขึ้นเมื่อใดก็ตามที่ ajaxEnabled ถูกปิดใช้งานโดยและลิงก์ภายนอกโดยการตั้งค่า $ .mobile.ajaxEnabled หรือโดยมีแอตทริบิวต์ target = ''

คุณสามารถแก้ไขได้โดยใช้สิ่งนี้:

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

(ขอบคุณ Richard Poole สำหรับวิธีการ live () - ไม่ได้ทำงานกับ bind ())

หากคุณปิด ajaxEnabled ไปทั่วโลกคุณจะต้องวาง [data-ajax = 'false']

สิ่งนี้ใช้เวลาค่อนข้างนานในการคิดออกเพราะฉันคาดหวังว่าจะเป็นปัญหาเฉพาะ jQuery Mobile ซึ่งอันที่จริงแล้วมันเป็นการเชื่อมโยง Ajax ที่ห้ามหน้าต่างใหม่จริงๆ

รหัสนี้ใช้ได้กับ 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

บางทีคุณควรอนุญาตให้เปิดลิงก์ในหน้าต่างใหม่เมื่อกำหนดเป้าหมายเป็น "_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:

Stay Standalone: ​​ป้องกันลิงก์ในเว็บแอปแบบสแตนด์อโลนที่เปิด 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 คือฉันสร้างลิงก์ทั้งหมด ดังนั้นฉันจึงเปิดแบบฟอร์มที่โพสต์ไปยังลิงก์ปลายทางจากนั้นป้อน type = "submit" ไม่ใช่วิธีที่ดีที่สุด แต่เป็นสิ่งที่ฉันคิดก่อนที่จะพบหน้านี้

ฉันสร้างแพ็คเกจที่ติดตั้งได้ใน bower จากคำตอบของ@ rmarscherซึ่งสามารถพบได้ที่นี่:

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">