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

  • 相关阅读:
    脚本——基础命令
    ELK 安装
    keepalived+lvs
    zabbix安装
    lnmp
    nagios安装
    nginx-tomcat动静分离
    课时五、boost与adaboost
    课时四、决策树和随机森林
    课时三、回归实践
  • 原文地址:https://www.cnblogs.com/zktww/p/10755111.html
Copyright © 2020-2023  润新知