前言:
在以前我们讲过把word转成HTML移植入自己的web项目使用:Word转html并移植到web项目
正文:
发现如果在layuiadmin框架中,页面里锚点跳转时会不正常(会跳转到新页面):
word转的html,我们去查看源代码,发现它进行跳转是使用:
href="#name"
进行跳转的,这#name和layuiadmin框架中页面跳转冲突,所以会自动进行页面跳转
知道了原因,我们就把word转的html相关文件(包括文件夹和HTML)放在layuiadmin框架外,
我这里是放在与之平级的地方,同在webapp下:
在框架内使用时,在对应页面使用iframe来进行引入,这就避免了layuiadmin与锚点跳转冲突问题:
<iframe class="full" src="/help/help.html" id="iframePage" onload="changeFrameHeight()" frameborder="0" width="100%" marginwidth="0" marginheight="0"></iframe> <script> function changeFrameHeight(){ var ifm = document.getElementById("iframePage"); ifm.height = document.documentElement.clientHeight; } window.onresize = function() { changeFrameHeight(); } document.getElementById("iframePage").onload = changeFrameHeight; </script>
在layuiadmin框架内进行页面锚点跳转也就可以了。
后话:
当然,这是因为word转的html默认使用href="#name" 这种a标签的原因,所有这样使用;
如果是在自己写的页面中使用锚点(这里说的是使用layuiadmin框架的项目),这里推荐使用:
document.querySelector("#test").onclick = function(){ document.querySelector("#testshow").scrollIntoView(true); }
这样url是不会改变,使用起来也比较简单