将图标添加到主屏幕后,Web出现问题。如果从主屏幕启动网络,则所有链接将在Safari中的新窗口中打开(并失去全屏功能)。我该如何预防?我找不到任何帮助,只有一个未解决的问题。
将图标添加到主屏幕后,Web出现问题。如果从主屏幕启动网络,则所有链接将在Safari中的新窗口中打开(并失去全屏功能)。我该如何预防?我找不到任何帮助,只有一个未解决的问题。
Answers:
我在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
}
}
[].forEach.call(document.links, function(link) { link.addEventListener("click", function(event) { event.preventDefault(); window.location = this.href; }) });
此处的其他解决方案要么不考虑外部链接(您可能想在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");
});
this.href
而不是强制转换为jQuery对象,但感谢您的回答。适用于iOS6。
这在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;
}
});
}
});
$('a').on('click'
,function(e){` 替换function(e){` $('area').on('click'
,但这似乎也不起作用。有任何想法吗?
a
,href="#"
则可以在jquery选择器上进行更具体的说明,例如$('a[href!="#"]')
这是一个老问题,这里的许多解决方案都使用javascript。从那时起,iOS 11.3已发布,您现在可以使用scope成员。作用域成员是一个URL,就像该作用域"/"
下的所有路径都不会打开新页面一样。
作用域成员是一个字符串,代表此Web应用程序的应用程序上下文的导航作用域。
这是我的示例:
{
"name": "Test",
"short_name": "Test",
"lang": "en-US",
"start_url": "/",
"scope": "/",
...
}
您还可以在这里阅读更多有关它的信息。我还建议使用将提供此功能的生成器。
如果您指定范围,则所有功能都将与Android一样,如预期般工作,超出范围的目的地将在Safari中打开-带有PWA后退按钮(状态栏中的小按钮)。
根据Davids的回答和Richards的评论,您应该执行域检查。否则,还将在您的Web应用程序中打开指向其他网站的链接。
$('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;
}
});
(感谢Richard Poole的live()方法-不适用于bind())
如果已全局关闭ajaxEnabled,则需要删除[data-ajax ='false']。
我花了很长时间才弄清楚,因为我期望它是jQuery Mobile特有的问题,实际上实际上是Ajax链接实际上禁止了新窗口。
这段代码适用于iOS 5(对我有用):
在head标签中:
<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标签
当目标也明确设置为“ _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下进行测试即可:
这是在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;
}
});
}
});
我更喜欢在独立的Web应用程序模式下打开所有具有target =“ _ blank”的链接。当然,使用jQuery。
$(document).on('click', 'a', function(e) {
if ($(this).attr('target') !== '_blank') {
e.preventDefault();
window.location = $(this).attr('href');
}
});
我根据@rmarscher的回答创建了一个Bower可安装软件包,可以在这里找到:
http://github.com/stylr/iosweblinks
您可以使用以下方式轻松安装带有凉亭的代码段: 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);
});
scope
中使用参数manifest.json
。请参阅我的答案以获取更多详细信息。我已经在iOS 11.3中对其进行了测试,并且可以正常工作。