zoukankan      html  css  js  c++  java
  • html调用html的方法

    html调用html的方法

    html中引入调用另一个html的方法,尝试了好几种,都列出来: 
    其中第一种是最好的,其他的方法,可以尝试看看,是不是适合你当前项目

    一、div+$(“#page1”).load(“b.html”) 

    需要保持结构层次和服务
    参考代码:

    <body>
        <div id="page1"></div>
        <div id="page2"></div>
        <script>
              $("#page1").load("page/Page_1.html");
              $("#page2").load("page/Page_2.html");
        </script>
    </body>

    二、iframe 
    参考代码:

    <head>
    </head>
    <body>
       <div id="page1">
            <iframe align="center" width="100%" height="170" src="page/Page_1.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
       </div>
       <div id="page2">
            <iframe align="center" width="100%" height="170" src="page/Page_2.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
       </div>
    </body>

    三、object引入 
    参考代码:

    <body>
        <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150>
        </object>
    </body>

    四、import引入 

    测试用

    参考代码:

    <head>
        <link rel="import" href="page/Page_1.html" id="page1">
    </head>
    <body>
        <script>
            console.log(page1.import.body.innerHTML);
        </script>
    </body>

    综上所诉iframe和object方法最好,有童鞋感觉iframe不能操作到父页面的跳转操作,是可以的,加上顶层判断就好
    a标签的顶层判断就是top属性
    js的顶层要去parent找百度一下都很多的

  • 相关阅读:
    Typora+PicGo图片上传教程
    创建一个springbootcloud项目
    plugin.xml 解析说明
    Java 元注解 使用示例
    Spring 注解学习 使用示例
    springboot2.2 集成 activity6 请假完整示例
    SpringBoot 过滤器,拦截器初步学习整理(有示例代码)
    mybatis plus mysql 代码生成器 示例demo
    Bootstrap相关方法,事件整理
    网站链接
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/9000966.html
Copyright © 2011-2022 走看看