iPhone Safari Web App नई विंडो में लिंक खोलता है

Question

मुझे होम स्क्रीन पर आइकन जोड़ने के बाद वेब के साथ समस्या है। यदि वेब होम स्क्रीन से लॉन्च किया गया है, तो सभी लिंक सफारी में नई विंडो में खुलेंगे (और पूर्ण स्क्रीन कार्यक्षमता खो देंगे)। मैं यह कैसे रोक सकता हूँ? मुझे कोई मदद नहीं मिली, केवल वही अनुत्तरित प्रश्न।

Comments

अब आप scopeपैरामीटर का उपयोग कर सकते हैं manifest.json। अधिक जानकारी के लिए मेरा जवाब देखें। मैंने इसे iOS 11.3 में टेस्ट किया है और यह काम करता है।

— अमीर रफ़्फ़र

आईओएस 11.3 ओपनिंग सफ़ारी से जूझ रहे किसी व्यक्ति के लिए, कृपया यहाँ @ AmirRaminfar का उत्तर देखें: stackoverflow.com/a/49604315/32055

— क्रिस हैन्स

Answer 1

मैं 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
    }
}

Comments

स्पष्ट रूप से बताने के लिए और इसे स्पष्ट करने के लिए: iOS वेब ऐप्स में लिंक का व्यवहार करता है जिसे सफारी में खोला जाना चाहिए, और जावास्क्रिप्ट स्थान परिवर्तन एक इन-ऐप कार्रवाई के रूप में होता है जिसे वेब-ऐप में saty की अनुमति है। उपरोक्त कोड काम करता है क्योंकि यह डिफ़ॉल्ट लिंक व्यवहार को रोकता है, इसे js nav call के साथ बदल देता है।

— Oskar Austegard

क्या इसके विपरीत का उदाहरण है? सफारी इवेंट में एक पेज खोलने के लिए एक iPhone वेब एप्लिकेशन को मजबूर करना यह एक जावास्क्रिप्ट स्थान परिवर्तन है?

— १६

@Pavel iwebkit का उल्लेख करने के लिए धन्यवाद :)। कुछ ट्रैफ़िक प्राप्त करने में मदद करता है: D

— cmplieger

[].forEach.call(document.links, function(link) { link.addEventListener("click", function(event) { event.preventDefault(); window.location = this.href; }) });

— एलेक्स

क्या इसका कोई साइड इफेक्ट है?

— पिंगू

Answer 2

यहां अन्य समाधान या तो बाहरी लिंक के लिए नहीं हैं (जो कि आप शायद सफारी में बाहरी रूप से खोलना चाहते हैं) या रिश्तेदार लिंक (उनमें डोमेन के बिना) के लिए खाता नहीं है।

इस gist के html5 मोबाइल-बॉयलरप्लेट प्रोजेक्ट लिंक के विषय पर अच्छी चर्चा है: 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>

Comments

यह एक पेज, हमारी कंपनी के लिए "हमसे संपर्क करें" पृष्ठ को छोड़कर महान काम करता है। पेज दिखाने के बजाय, यह एप्लिकेशन "मैप्स" खोलता है और हमारे कार्यालय को इंगित करता है। यह क्या कारण हो सकता है, और हम इसे कैसे ठीक कर सकते हैं?

— जोनाथन

@ जोनाथन मुझे यकीन नहीं है। यदि आप इस स्क्रिप्ट को हटाते हैं तो ऐसा नहीं होता है? शायद अपनी साइट के लिए एक लिंक पोस्ट? या एक नया प्रश्न खोलें, जो बेहतर हो सकता है।

— rmarscher

@rmarscher यह केवल आपके द्वारा प्रदान किए गए कोड को चलाने के दौरान होता है और इसके बिना नहीं। मैं खुद एक वेब डेवलपर हूं और मुझे समझ नहीं आता कि यह इस तरह से लिंक को क्यों हैंडल करेगा। मेरे पास एक पृष्ठ URL नहीं है क्योंकि यह वर्तमान में कोड नहीं चला रहा है इसलिए आप इसे नोटिस नहीं करेंगे। इसके अलावा, यह नियमित रूप से सफारी को भी प्रभावित करता है, और न केवल स्टैंडअलोन। आपके उत्तर के लिए धन्यवाद!

— जोनाथन

यह स्वीकृत उत्तर होना चाहिए और हेडर में कोड रखकर PHPRunner के साथ बने मेरे iPad1 फुलस्क्रीन क्लाइंट पर एक आकर्षण का काम करता है। यह निश्चित नहीं है कि यह इतना अस्पष्ट क्यों है क्योंकि यह कोड का काफी संक्षिप्त सा लगता है जो कानूनी तौर पर ज्यादा BW ओवरहेड के बिना लिखा जा सकता है ... जो कि सिर्फ picky है और आम तौर पर वास्तव में धन्यवाद कहना चाहते हैं।

— 21

यह बूटस्ट्रैपी चीज़ों को तोड़ता है जैसे कि href = "#" लिंक जो कि js फ़ंक्शंस द्वारा उपयोग किए जाते हैं

— सीन

Answer 3

यदि आप jQuery का उपयोग कर रहे हैं, तो आप कर सकते हैं:

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

Comments

कृपया समझाएं कि (.Live) बेहतर क्यों हो सकता है?

— ajcw

लाइव ईवेंट को उन सभी कड़ियों से जोड़ देगा, जिनमें अभी तक मौजूद नहीं हैं, क्लिक केवल उन लोगों के लिए बाध्य होगा जो वर्तमान में मौजूद हैं

— msaspence

धन्यवाद! जीवन रक्षक की। मैं अभी घंटे बिता रहा हूं यह जानने की कोशिश कर रहा हूं कि सफारी हर समय क्यों लोड हो रही थी।

— स्टीव

मेरे से +1 - this.hrefएक jQuery ऑब्जेक्ट के लिए कास्टिंग के बजाय उपयोग किया जाता है , लेकिन इस उत्तर के लिए धन्यवाद। IOS6 पर काम करता है।

— फेंटन

.live () को jQuery 1.7 के रूप में चित्रित किया गया है , और 1.9 के रूप में हटा दिया गया है । इसके बजाय $ (दस्तावेज़) .on ('क्लिक', 'a', फ़ंक्शन () {...}) का उपयोग करें।

— टॉम डेविस

Answer 4

यह मेरे लिए iOS 6.1 और बूटस्ट्रैप 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;
        }
      });
    }
  });

Comments

+1। यह वास्तव में जाँच करता है कि क्या आप लिंक को ठीक करने से पहले वेबप का उपयोग कर रहे हैं।

— ट्रॉली

आईओएस 8.0.2 में काम करता है! धन्यवाद

— जोएल मर्फी

@ मेरे पास एक और वेबपैड है जो iPad में चल रहा है जो कि href के रूप में एक इमेज मैप का उपयोग कर रहा है और यह कोड काम नहीं करता है। यह अन्य सभी लिंक के लिए ठीक काम करता है। कोई भी विचार कि इस कोड को इमेज मैप्स के साथ कैसे काम करना है? मैंने पूरे चंक और रिप्लेसिंग की कोशिश की है $('a').on('click', फंक्शन (ई) {`विद $('area').on('click', फंक्शन (ई) {` लेकिन यह भी काम नहीं करता है। कोई विचार?

— निमेटोथ

मामले में आप पहले से ही क्लिक कार्यों पर परिभाषित किया गया है aके साथ href="#"तो आप jQuery चयनकर्ता पर अधिक विशिष्ट, जैसे हो सकता है$('a[href!="#"]')

— CJK

Answer 5

यह एक पुराना सवाल है और यहाँ कई समाधान जावास्क्रिप्ट का उपयोग कर रहे हैं। तब से, iOS 11.3 जारी किया गया है और अब आप गुंजाइश सदस्य का उपयोग कर सकते हैं । स्कोप मेंबर एक यूआरएल है, "/"जहां उस स्कोप के तहत सभी रास्ते एक नया पेज नहीं खोलेंगे।

गुंजाइश सदस्य एक स्ट्रिंग है जो इस वेब अनुप्रयोग के अनुप्रयोग संदर्भ के नेविगेशन क्षेत्र का प्रतिनिधित्व करता है।

यहाँ मेरा उदाहरण है:

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

आप इसके बारे में यहाँ और भी पढ़ सकते हैं । मैं जनरेटर का उपयोग करने की भी सिफारिश करता हूं जो इस कार्यक्षमता को प्रदान करेगा।

यदि आप गुंजाइश निर्दिष्ट करते हैं, तो सब कुछ एंड्रॉइड के समान अपेक्षित रूप से काम करता है, तो दायरे से बाहर के गंतव्य सफारी में खुलेंगे - बैक बटन (स्टेटस बार में छोटा एक) के साथ आपके PWA में।

Comments

दुर्भाग्य से, मुझे विश्वास नहीं है कि आप अन्य वेबसाइटों (जैसे OAuth लॉगिन को किसी अन्य डोमेन पर) के दायरे में शामिल कर सकते हैं।

— भोलिस

अरे @Amir, मैंने Angular का उपयोग करके एक Pwa बनाया है और Android पर, मुझे 'Add to home screen prompt' मिल गया है क्योंकि ऐसा लगता है कि यह मेरे मैनफ़ेस्ट.जॉसन को सही ढंग से पढ़ रहा है। हालाँकि, IOs Chrome / Safari पर, कोई संकेत नहीं ... कोई विचार?

— ustad

Answer 6

डेविडस जवाब और रिचर्ड्स टिप्पणी के आधार पर, आपको एक डोमेन चेक करना चाहिए। अन्यथा आपके वेब ऐप में अन्य वेबसाइटों के लिंक भी खुल जाएंगे।

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

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

Comments

उपरोक्त समाधानों के लिए अच्छा जोड़। ऐप में बाहरी साइटों को खोलने से लोगों को रखने के लिए एक डोमेन चेक की आवश्यकता है। इसके अलावा, iOS 5 पर काम करता है

— Ian

मेरे लिए भी iOS 5 पर काम करता है। समस्या कभी-कभी कैश के साथ हो सकती है। विभिन्न तरीकों का परीक्षण करते समय मैं iOS को अपने कैश को अमान्य करने और जेएस फ़ाइलों के नए संस्करण को पुनर्प्राप्त करने में असमर्थ था (सफारी ने होम स्क्रीन पर ऐप को जोड़ने के बाद परिवर्तन नहीं उठाए थे)। मेरे देव सर्वर के बदलते पोर्ट ने मदद की। यदि आपकी अधिकतम आयु = 0 सेट (या समतुल्य) है तो यह संभवतः आपको प्रभावित नहीं करेगा।

— लुकाज़ कोरज़स्की

Answer 7

यदि jQuery मोबाइल का उपयोग कर रहे हैं, तो आप डेटा-अजाक्स = 'गलत' विशेषता का उपयोग करते हुए नई विंडो का अनुभव करेंगे। वास्तव में, यह तब भी होगा जब ajaxEnabled बंद हो जाएगा, एक $ .mobile.ajaxEnabled सेटिंग द्वारा या लक्ष्य = '' विशेषता होने से बाहरी लिंक द्वारा।

आप इसका उपयोग करके इसे ठीक कर सकते हैं:

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

(लाइव के लिए रिचर्ड पूल के लिए धन्यवाद) (विधि - बाइंड के साथ काम नहीं कर रहा था)

यदि आपने विश्वव्यापी रूप से निष्क्रिय कर दिया है, तो आपको [data-ajax = 'false'] को छोड़ना होगा।

मुझे यह पता लगाने में लंबा समय लगा क्योंकि मैं उम्मीद कर रहा था कि यह एक jQuery मोबाइल विशिष्ट समस्या है जहाँ वास्तव में यह अजाक्स लिंकिंग था जो वास्तव में नई विंडो को प्रतिबंधित करता था।

Comments

बिल्कुल सही, आपने मुझे बचा लिया :)

— शाऊल

Answer 8

यह कोड 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 वेब ऐप मेटा टैग

Comments

किसी कारण से मुझे लगता है कि यह समझने में सबसे आसान है।

— जेरीबीबो

Answer 9

शायद आपको नई विंडो में लिंक खोलने की अनुमति देनी चाहिए जब लक्ष्य स्पष्ट रूप से "_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;
    }

});

Comments

आपका बहुत बहुत धन्यवाद! यह एकमात्र कोड है जो iOS5 w / Twitter बूटस्ट्रैप के लिए काम करता है। हालांकि यह उत्पादन पर काम नहीं करता है।

— चिम कान

मम्म इतना निश्चित नहीं है कि यह उत्पादन में काम क्यों नहीं करेगा लेकिन मुझे लगता है कि यह कुछ और है। मुझे बताना!

— daformat

Answer 10

मैंने एक ऐसा पाया है जो बहुत ही पूर्ण और कुशल है क्योंकि यह केवल स्टैंडअलोन WebApp के तहत चलने की जाँच करता है, बिना jQuery के काम करता है और सीधा भी है, बस iOS 8.2 के तहत परीक्षण किया गया है:

स्टेअललोन रहें: मोबाइल सफारी खोलने वाले स्टैंडअलोन वेब ऐप्स में लिंक को रोकें

Answer 11

आप लगभग सामान्य रूप से लिंकिंग भी कर सकते हैं:

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

और आप हैश टैग और href हटा सकते हैं, यह जो कुछ भी करता है वह उपस्थिति को प्रभावित करता है ।।

Answer 12

यह मेरे लिए आईओएस 6 पर काम कर रहा है (रैमरशर के जवाब का बहुत मामूली अनुकूलन):

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

Answer 13

यह सीन का थोड़ा अनुकूलित संस्करण है जो बैक बटन को रोक रहा था

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

});

Answer 14

ट्विटर बूटस्ट्रैप और रेल 3 के साथ उन लोगों के लिए

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

हटाएं लिंक अभी भी इस तरह से काम कर रहे हैं।

Answer 15

मैं उन सभी स्टैंडअलोन वेब ऐप मोड के अंदर सभी लिंक खोलना पसंद करता हूं, जिनमें लक्ष्य = "_ रिक्त" को छोड़कर। JQuery का उपयोग, बिल्कुल।

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

Answer 16

IOS वेब ऐप के लिए मैंने जो एक वर्कअराउंड उपयोग किया था, वह यह था कि मैंने सभी लिंक (जो सीएसएस द्वारा बटन थे) फॉर्म सबमिट बटन बनाए थे। इसलिए मैंने एक फॉर्म खोला जो गंतव्य लिंक पर पोस्ट किया गया था, फिर इनपुट टाइप = "सबमिट करें" सबसे अच्छा तरीका नहीं है, लेकिन यह वही है जो मैंने इस पृष्ठ को खोजने से पहले सोचा था।

Answer 17

मैंने @ rmarscher के उत्तर से एक बोवर इंस्टाल करने योग्य पैकेज बनाया, जो यहां पाया जा सकता है:

http://github.com/stylr/iosweblinks

आप आसानी से बोवर का उपयोग करके स्निपेट को स्थापित कर सकते हैं bower install --save iosweblinks

Answer 18

उपयोग करने वालों के लिए JQuery Mobile, उपरोक्त समाधान पॉपअप संवाद को तोड़ते हैं। यह वेबप के भीतर लिंक रखेगा और पॉपअप के लिए अनुमति देगा।

$(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');     
});

Answer 19

यहाँ मैं एक पृष्ठ पर सभी लिंक के लिए उपयोग होता है ...

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

Answer 20

आप बस इस मेटा टैग को हटा सकते हैं।

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