mipengine/mip

MIP 中锚点定位问题

xuexb opened this issue · 2 comments

xuexb commented

源代码(示例):

<a href="#">#</a>
<a href="#1">#1</a>
<a href="#2">#2</a>
<a href="#a">#a</a>

经过 MIP-Cache 解析后(示例):

<a href="https://static.xuexb.com/html/test-anchor.html#">#</a>
<a href="https://static.xuexb.com/html/test-anchor.html#1">#1</a>
<a href="https://static.xuexb.com/html/test-anchor.html#2">#2</a>
<a href="https://static.xuexb.com/html/test-anchor.html#a">#a</a>

而又命中了核心代码的链接规则:

mip/src/viewer.js

Lines 235 to 263 in 2af390c

_proxyLink: function () {
var self = this;
var regexp = /^http/;
var telRegexp = /^tel:/;
util.event.delegate(document, 'a', 'click', function (e) {
if (!this.href) {
return;
}
// For mail、phone、market、app ...
// Safari failed when iframed. So add the `target="_top"` to fix it. except uc and tel.
/* istanbul ignore next */
if (platform.isUc() && telRegexp.test(this.href)) {
return;
}
if (!regexp.test(this.href)) {
this.setAttribute('target', '_top');
return;
}
e.preventDefault();
if (this.hasAttribute('mip-link') || this.getAttribute('data-type') === 'mip') {
var message = self._getMessageData.call(this);
self.sendMessage(message.messageKey, message.messageData);
} else {
// other jump through '_top'
top.location.href = this.href;
}
}, false);
},

导航经过 MIP-Cache 后(线上),原生的 HTML 锚点不能使用,点击直接跳转到源站了。

xuexb commented

期望的:

  1. MIP-Cache 不应该对页面中的 href="#" 开头的锚点进行转换
  2. 如果是锚点链接,在线上环境不应该 window.top.location.href 跳转,应该走浏览器原生的逻辑,毕竟原生态,健康品。
xuexb commented

AMP-Cache 结果:

<a href=#>#</a>
<a href=#1>#1</a>
<a href=#2>#2</a>
<a href=#a>#a</a>

示例:https://static-xuexb-com.cdn.ampproject.org/v/s/static.xuexb.com/html/test-anchor-amp.html?d=1&amp_js_v=0.1&usqp=mq331AQGCAEYASAB#