iPhone Safari Web App открывает ссылки в новом окне
У меня проблема с вебом после добавления значка на главный экран. Если веб-сайт запускается с главного экрана, все ссылки открываются в новом окне в Safari (и теряют полноэкранный режим). Как я могу предотвратить это? Я не мог найти никакой помощи, только тот же вопрос без ответа.
20 ответов
Я нашел решение 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-шаблон содержит ссылку на эту суть, которая хорошо обсуждает эту тему: 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.
На основании ответа Дэвидса и комментария Ричардса, вы должны выполнить проверку домена. В противном случае ссылки на другие сайты также будут открыты в вашем веб-приложении.
$('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;
}
});
(Спасибо Ричарду Пулу за метод 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
Я нашел один, который является очень полным и эффективным, потому что он проверяет работу только под автономным WebApp, работает без jQuery и также прост, только что протестирован под iOS 8.2:
Оставайтесь автономными: не открывайте ссылки в автономных веб-приложениях, открывая Mobile Safari
Возможно, вам следует разрешить открывать ссылки в новом окне, когда для цели явно установлено значение "_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;
}
});
Вот что у меня сработало на 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>
Это слегка адаптированная версия Шона, которая мешала вернуться назад.
// 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;
}
});
}
});
Вы также можете делать ссылки почти нормально:
<a href="#" onclick="window.location='URL_TO_GO';">TEXT OF THE LINK</a>
И вы можете удалить хеш-тег и HREF, все, что он делает, это влияет на внешний вид..
Для тех, кто использует 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');
});
Одним из обходных путей, который я использовал для веб-приложения для iOS, было то, что я сделал все ссылки (которые были кнопками по CSS) с помощью кнопок отправки формы. Поэтому я открыл форму, в которой размещена ссылка назначения, а затем введите type="submit" Не лучшим образом, но это то, что я понял до того, как нашел эту страницу.
Я предпочитаю открывать все ссылки в автономном режиме веб-приложения, кроме тех, которые имеют target="_blank". Конечно, используя jQuery.
$(document).on('click', 'a', function(e) {
if ($(this).attr('target') !== '_blank') {
e.preventDefault();
window.location = $(this).attr('href');
}
});
Для тех, кто с 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;
}
});
Удалить ссылки все еще работают таким образом.
Я создал установочный пакет bower из ответа @rmarscher, который можно найти здесь:
http://github.com/stylr/iosweblinks
Вы можете легко установить фрагмент с беседкой, используя bower install --save iosweblinks
Вот что я бы использовал для всех ссылок на странице...
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">