当我们在iOS移动端开发H5页面时，使用alert或confirm弹出提示信息时，会默认在弹窗的消息内容底部显示一个带有网址的链接，这显然并不是我们所期望的，因此，我们需要对其进行去除。
下面是具体的攻略，分以下几个步骤：
1. 创建一个全局样式
首先，我们需要在头部的<head>标签内添加一个全局的CSS样式，如下所示：
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
/* 去除alert/confirm中的URL */
a[href^="blob:"] {
display: none !important;
}
</style>
</head>
该样式会匹配所有具有"blob:"链接前缀的链接，并将其隐藏。"blob:"链接前缀是指在JS代码中生成的本地URL，如生成图片的URL。
2. 替换默认的弹窗方法
接下来，我们需要替换默认的alert和confirm方法为自定义的方法，以便能够去除其中的网址链接。
// 自定义alert方法
window.alert = function(msg) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(msg);
iframe.parentNode.removeChild(iframe);
}
// 自定义confirm方法
window.confirm = function(msg) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
var result = window.frames[0].window.confirm(msg);
iframe.parentNode.removeChild(iframe);
return result;
}
这里的自定义alert和confirm方法的思路是在当前页面内创建一个隐藏的<iframe>元素，并将其src属性设置为"data:text/plain"，然后在该<iframe>元素内创建一个新的window对象，并调用其原生的alert或confirm方法，这样就可以去除其中的链接。
接下来，我们可以尝试使用自定义的alert和confirm方法，例如：
alert("Hello World!");
var result = confirm("Are you sure?");
使用这两行代码弹出的弹窗将不会显示链接。
示例
示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
/* 去除alert/confirm中的URL */
a[href^="blob:"] {
display: none !important;
}
</style>
<script type="text/javascript">
// 自定义alert方法
window.alert = function(msg) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(msg);
iframe.parentNode.removeChild(iframe);
}
// 自定义confirm方法
window.confirm = function(msg) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
var result = window.frames[0].window.confirm(msg);
iframe.parentNode.removeChild(iframe);
return result;
}
</script>
</head>
<body>
<button onclick="alert('Hello World!')">点击弹出alert</button>
<br>
<button onclick="confirm('Are you sure?')">点击弹出confirm</button>
</body>
</html>
该示例创建了一个包含两个按钮的页面，一个用于弹出alert，另一个用于弹出confirm。
示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
/* 去除alert/confirm中的URL */
a[href^="blob:"] {
display: none !important;
}
</style>
<script type="text/javascript">
// 自定义alert方法
window.alert = function(msg) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(msg);
iframe.parentNode.removeChild(iframe);
}
// 自定义confirm方法
window.confirm = function(msg) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
var result = window.frames[0].window.confirm(msg);
iframe.parentNode.removeChild(iframe);
return result;
}
</script>
</head>
<body>
<script>
alert("Hello World!");
var result = confirm("Are you sure?");
alert("You clicked " + (result ? "OK" : "Cancel"));
</script>
</body>
</html>
该示例在页面加载时自动弹出alert和confirm，然后根据confirm的返回值输出不同的提示信息。
以上两个示例展示了如何通过自定义alert和confirm方法去除其中的网址链接，让我们的H5页面更加美观和友好。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：iOS移动端(H5)alert/confirm提示信息去除网址(URL) - Python技术站
微信扫一扫 
支付宝扫一扫 