word转HTML在layuiadmin中锚点调转问题

前言:

在以前我们讲过把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是不会改变,使用起来也比较简单

 

posted @ 2019-04-23 10:56  丿似锦  阅读(704)  评论(0编辑  收藏  举报