हाइपरलिंक में एक अलग पोर्ट नंबर से संबंधित URL?

136

क्या जावास्क्रिप्ट / सर्वर-साइड स्क्रिप्टिंग के बिना एक ही बॉक्स पर एक अलग पोर्ट नंबर से लिंक करने का कोई तरीका है, अगर मुझे होस्टनाम नहीं पता है?

उदाहरण के लिए:

<a href=":8080">Look at the other port</a>

(यह उदाहरण काम नहीं करेगा क्योंकि यह सिर्फ इलाज करेगा: 8080 एक स्ट्रिंग के रूप में जिसे मैं नेविगेट करना चाहता हूं)

html

— सियारन मैकनेकलर
स्रोत

stackoverflow.com/questions/8317059/relative-path-but-for-port इसे देखें ... यह मेरे लिए काम किया

बहुत से लोगों को नीचे सर्वर साइड समाधान, nginx साथ पर ढेर क्योंकि $http_host: var काम करता है, उदाहरण के लिए return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>एक में यानी /etc/nginx/conf.d/strange.confफ़ाइल।

— मार्चु

52

यह अच्छा होगा यदि यह काम कर सकता है, और मैं नहीं देखता कि :यूआरआई घटक के अंदर पोर्ट पृथक्करण के लिए एक आरक्षित वर्ण क्यों है , इसलिए ब्राउज़र इस URL के सापेक्ष एक पोर्ट के रूप में वास्तविक रूप से व्याख्या कर सकता है, लेकिन दुर्भाग्य से यह नहीं है ' t और ऐसा करने का कोई तरीका नहीं है।

इसलिए आपको ऐसा करने के लिए जावास्क्रिप्ट की आवश्यकता होगी;

// delegate event for performance, and save attaching a million events to each anchor
document.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName.toLowerCase() == 'a')
  {
      var port = target.getAttribute('href').match(/^:(\d+)(.*)/);
      if (port)
      {
         target.href = window.location.origin;
         target.port = port[1];
      }
  }
}, false);

फ़ायरफ़ॉक्स 4 में परीक्षण किया गया

फिडल: http://jsfiddle.net/JtF39/79/

अपडेट : बग को url के अंत में पोर्ट करने के लिए तय किया गया और अंत में जोड़े जाने के लिए रिश्तेदार और पूर्ण urls के लिए समर्थन भी जोड़ा गया:

<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>

— गैरी ग्रीन
स्रोत

1

तो जावास्क्रिप्ट के बिना कोई सही समाधान नहीं है

— डैनियल रुफ़

2

जावास्क्रिप्ट के बिना ऐसा करने का कोई तरीका नहीं है।

— गैरी ग्रीन

6

यह सफारी 6 में काम नहीं किया। समस्या यह है कि आप सापेक्ष url से पोर्ट नहीं हटा रहे हैं, इसलिए आप कुछ इस तरह से समाप्त http://myhost:8080/:8080करते हैं href=":8080"। इसे ठीक करने के लिए आप 'target.port = port [1]; target.href = target.href.replace("/:"+target.port, "");(यह एक सही समाधान नहीं है, क्योंकि यह एक मिल / जगह है, लेकिन यह उन सरल मामलों के लिए अच्छा है, जहां आप URL में पोर्ट-स्ट्रिंग के बारे में चिंतित नहीं हैं।)

— zekel

1

मेरा समाधान एक ASP.NET वर्ग बनाना था जो URL उत्पन्न करता है। यह मूल रूप से उपरोक्त समाधान है, बस सर्वर-साइड।

— धोखेबाज़ 1024

7

कृपया इस समाधान का उपयोग न करें । यह जावास्क्रिप्ट के बिना ग्राहकों पर पूरी तरह से टूट जाएगा , संभवतः स्क्रीन पाठकों जैसे कई पहुंच उपकरणों सहित। इसके बजाय सर्वर पर URL जनरेट करें।

— स्वेन स्लोटवेग

88

इनके बारे में क्या ख्याल है:

पोर्ट नंबर को क्लिक पर संशोधित करें:

<a href="/other/" onclick="javascript:event.target.port=8080">Look at another port</a>

हालाँकि, यदि आप अपने माउस को लिंक पर रखते हैं, तो यह लिंक को नए पोर्ट नंबर के साथ प्रदर्शित नहीं करता है। यह तब तक नहीं है जब तक आप इस पर क्लिक नहीं करते हैं कि यह पोर्ट नंबर जोड़ता है। इसके अलावा, अगर उपयोगकर्ता लिंक पर राइट-क्लिक करता है और "कॉपी लिंक लोकेशन" करता है, तो उन्हें बिना पोर्ट नंबर के अनमॉडिफाइड URL मिलता है। इसलिए यह आदर्श नहीं है।

यहां पृष्ठ लोड होने के बाद URL बदलने की एक विधि है, इसलिए लिंक पर मँडरा या "कॉपी लिंक स्थान" करने से पोर्ट नंबर के साथ अद्यतन URL प्राप्त होगा:

<html>
<head>
<script>
function setHref() {
document.getElementById('modify-me').href = window.location.protocol + "//" + window.location.hostname + ":8080/other/";
}
</script>
</head>

<body onload="setHref()">
<a href="/other/" id="modify-me">Look at another port</a>
</body>
</html>

— क्रेग मैकक्वीन
स्रोत

कैवियट को इंगित करने के लिए धन्यवाद, जिसके बारे में मुझे पता था। मेरी स्थिति में कैवेट बहुत महत्वपूर्ण नहीं हैं, और मैं आपके पहले समाधान की सादगी पसंद करता हूं। मैं लगभग निश्चित था कि मैंने पहले ही आपके उत्तर को रद्द कर दिया था, लेकिन सॉफ्टवेयर को लगता है कि नहीं, और शायद सॉफ्टवेयर की स्मृति मेरे लिए अधिक विश्वसनीय है। मैं इसे (फिर से ??) upvoted है।

— केविन वॉकर

मैंने रहस्य सुलझा लिया है: मैंने गलती से इसके बजाय अन्य उत्तरों में से एक को उखाड़ दिया। उफ़। मेरे पास आकस्मिक दुर्घटना को रोकने के लिए पर्याप्त प्रतिष्ठा नहीं है।

— केविन वाकर

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>डब्ल्यू 3 विनिर्देशों के अनुसार, तकनीकी रूप से काम नहीं करना चाहिए । event.targetमाना जाता है readonly। लेकिन यह मेरे लिए क्रोम और फ़ायरफ़ॉक्स में काम करने लगता है!

— JamesThomasMoon1979

एक लाइनर समाधान महान है! +1

— पायोत्र कुला

धन्यवाद। मुझे आपका दूसरा समाधान पसंद है क्योंकि मैं HTML में तत्व के href को सबसे अधिक संभावना वाले यूआरआई के लिए एक कमबैक के रूप में सेट कर सकता हूं।

— डंकन एक्स सिम्पसन

56

आप इसे आसानी से डॉक्यूमेंट का उपयोग करके कर सकते हैं। जब आप इस पर होवर करेंगे तो URL सही ढंग से प्रदर्शित होगा। आपको इस पद्धति का उपयोग करके एक अद्वितीय आईडी की भी आवश्यकता नहीं है और यह क्रोम, फ़ायरफ़ॉक्स और IE के साथ काम करता है। चूंकि हम केवल चरों को संदर्भित कर रहे हैं और किसी भी बाहरी स्क्रिप्ट को लोड नहीं कर रहे हैं, यहां दस्तावेज़ का उपयोग करके पृष्ठ लोड प्रदर्शन को प्रभावित नहीं करेगा।

<script language="JavaScript">
document.write('<a href="' + window.location.protocol + '//' + window.location.hostname + ':8080' + window.location.pathname + '" >Link to same page on port 8080:</a> ' );
</script>

— कर्ट शुल्त्स
स्रोत

3

सरल और सुरुचिपूर्ण! मुझे नहीं पता कि इसके पास अधिक वोट क्यों नहीं हैं - शायद यह सिर्फ एक देर से आने वाला है।

— केविन एच। पैटरसन

5

यह भी ध्यान दें, आपको window.location.protocolभाग को शामिल करने की आवश्यकता नहीं है , बस शुरुआत के साथ '//'।

— 2

वैध लगता है। सुरुचिपूर्ण।

— जय

असली काम और सुरुचिपूर्ण।

— रॉबर्ट लुसियन चिरियाक

बस document.writeइतना कहना है कि आजकल बहुत अधिक सार्वभौमिक है। कुछ ऐसा करना बेहतर होगाmyElement.innerHTML = '...'

— mwfearnley

13

माउसओवर पर पोर्ट नंबर को संशोधित करें:

<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>

यह https://stackoverflow.com/a/13522508/1497139 का सुधार है जिसमें लिंक को सही तरीके से नहीं दिखाने का ड्रा बैक नहीं है।

— वोल्फगैंग फाहल
स्रोत

5

जावास्क्रिप्ट के बिना, आपको कुछ सर्वर साइड स्क्रिप्टिंग पर निर्भर रहना होगा। उदाहरण के लिए, यदि आप ASP का उपयोग कर रहे हैं, तो कुछ ...

<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080">Look at the other port</a>

कार्य करना चाहिए। हालांकि, सटीक प्रारूप उस तकनीक पर निर्भर करेगा जो आप उपयोग कर रहे हैं।

— GDT
स्रोत

4

इसके साथ कुश्ती करने के बाद मुझे वास्तव में पता चला कि SERVER_NAME एक आरक्षित चर है। इसलिए, यदि आप पृष्ठ (www.example.com:8080) पर हैं, तो आपको 8080 को छोड़ने और दूसरे पोर्ट को लागू करने में सक्षम होना चाहिए। उदाहरण के लिए यह संशोधित कोड सिर्फ मेरे लिए काम करता है और मुझे किसी भी बेस पोर्ट से पोर्ट 8069 पर ले जाता है (अपने पोर्ट को आवश्यकतानुसार बदलें)

<div>
    <a href="http://<?php print
    $_SERVER{'SERVER_NAME'}; ?>:8069"><img
    src="images/example.png"/>Example Base (http)</a>
</div>

— लैंडिस अर्नोल्ड
स्रोत

1

अच्छा PHP समाधान! आप प्रोटोकॉल को छोड़ सकते हैं ताकि यह ऑटो-डिटेक्ट हो जाए:<a href="https://stackoverflow.com//<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">

— ADTC

3

सर्वर चर से url प्राप्त करना बेहतर है:

// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">

// ASP.net
<a href='<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp'>

— T30
स्रोत

2

जटिल जावास्क्रिप्ट की आवश्यकता नहीं है: बस अपने एंकर के बाद एक स्क्रिप्ट नोड डालें, फिर जावास्क्रिप्ट में नोड प्राप्त करें, और window.location.origin विधि के साथ अपनी href संपत्ति को संशोधित करें ।

 <a id="trans">Look at the other port</a>
 <script>
      document.getElementById('trans').href='http://'+window.location.origin+':8081';
 </script>

आईडी प्रॉपर्टी अद्वितीय पेज वाइड होनी चाहिए, इसलिए आप नोड ऑब्जेक्ट्स को पुनः प्राप्त करने के लिए अन्य विधि का उपयोग करना चाह सकते हैं।

लिनक्स पर अपाचे और फ़ायरफ़ॉक्स के साथ परीक्षण किया गया।

— MUY बेल्जियम
स्रोत

किसी कारण से यह मेरे लिए काफी काम का नहीं था- इसने ब्राउज़र को निर्देश दिया http//localhost:8081कि लापता कॉलन पर ध्यान दें। मैंने अभी-अभी प्रोटोकॉल भाग को पूरी तरह से हटा दिया है क्योंकि Chrome ने http को वैसे भी ग्रहण किया है।

— जॉयरिक

आपने इसका परीक्षण कैसे किया?

— MUY बेल्जियम

1

मुझे लगता है कि window.location.hostnameइसके बजाय होना चाहिए । देखें डेवलपर.

— mozilla.org/en-US/docs/Web/API/Location

2

यह समाधान मुझे साफ दिखता है

<a href="#"  
    onclick="window.open(`${window.location.hostname}:8080/someMurghiPlease`)">
    Link to some other port on the same host
  </a>

— a_rahmanshah
स्रोत

1

गैरी होल के जवाब के आधार पर , लेकिन क्लिक के बजाय पृष्ठ लोड पर यूआरएल बदल जाता है।

मैं css का उपयोग करके यूआरएल दिखाना चाहता था:

a:after {
  content: attr(href);
}

इसलिए मुझे जरूरत थी कि आने वाले वास्तविक यूआरएल को शामिल करने के लिए लंगर के href को परिवर्तित किया जाए।

function fixPortUrls(){
  var nodeArray = document.querySelectorAll('a[href]');
  for (var i = 0; i < nodeArray.length; i++) {
    var a = nodeArray[i];
    // a -> e.g.: <a href=":8080/test">Test</a>
    var port = a.getAttribute('href').match(/^:(\d+)(.*)/);
    //port -> ['8080','/test/blah']
    if (port) {
      a.href = port[2]; //a -> <a href="https://stackoverflow.com/test">Test</a>
      a.port = port[1]; //a -> <a href="http://localhost:8080/test">Test</a>
    }
  }
}

पृष्ठ लोड पर उपरोक्त फ़ंक्शन को कॉल करें।

या एक लाइन पर:

function fixPortUrls(){var na=document.querySelectorAll('a[href]');for(var i=0;i<na.length;i++){var a=na[i];var u=a.getAttribute('href').match(/^:(\d+)(.*)/);u&&a.href=u[2]&&a.port=u[1];}}

(मैं forइसके बजाय forEachIE7 में काम करता हूं ।)

— सैम हस्लर
स्रोत

0

मेरे द्वारा देखे गए उत्तरों में से कोई भी (और मैं कहूंगा, मैंने उन सभी को नहीं पढ़ा था) URL को ऐसे समायोजित करें कि एक मध्य क्लिक या "नए टैब में खोलें" ठीक से काम करेगा - लिंक का पालन करने के लिए केवल एक नियमित क्लिक। मैंने गैरी ग्रीन के उत्तर से उधार लिया, और URL को फ़्लाई-ऑफ़-फ़्लाई एडजस्ट करने के बजाय, हम इसे तब एडजस्ट कर सकते हैं जब पेज:

...
<script>
function rewriteRelativePortUrls() {
    var links = document.getElementsByTagName("a");
    for (var i=0,max=links.length; i<max; i++)
    {
        var port = links[i].getAttribute("href").match(/^:(\d+)(.*)/);
        if (port)
        {
            newURL = window.location.origin + port[0]
            links[i].setAttribute("href",newURL)
        }    
    }
}

</script>
<body onload="rewriteRelativePortUrls()">
...

— ddiepo
स्रोत