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找百度一下都很多的

  • 相关阅读:
    将Ubuntu18.04安装到U盘,实现即插即用
    小技巧之 前端自适应
    web笔记之 环境搭建
    C++学习笔记之 单例模式
    推荐一款Markdown编辑器:typora
    C++学习笔记之 类和对象
    C++学习笔记之 函数
    C++学习笔记之 内联函数
    C++学习笔记之 引用
    C++学习笔记之 const
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/9000966.html
Copyright © 2011-2022 走看看