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是不会改变，使用起来也比较简单

 

转载于:https://www.cnblogs.com/zktww/p/10755111.html