`

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

二、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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

三、object引入 
参考代码:

<head>
    <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150>
    </object>
</head>
  • 1
  • 2
  • 3
  • 4

四、import引入 
参考代码:

<head>
    <link rel="import" href="page/Page_1.html" id="page1">
</head>
<body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

参考文章:https://www.web-tinker.com/article/20637.html

五、bootstrap的panel组件,或者easyui的window组件,有点类似这个效果;

分享到:
评论

相关推荐

    一个Js文件函数中调用另一个Js文件函数的方法演示

    例如有这样一个html,里面有一个按钮,当按下时调用b.js文件中的方法b()。而b()中又要调用a.js文件中的方法a()。若要实现这个功能,必须注意,将要引入的Js文件代码放在&lt;/body&gt;下面。  首先,我们在html中...

    html静态页面调用php文件的方法

    举一个具体的例子来说明如何实现上述过程:在HTML文件中,可以使用以下JavaScript代码调用一个PHP文件,并传递一个参数。 ```html &lt;script type="text/javascript" src="b.php?action=test"&gt;&lt;/script&gt; ``` 在这段...

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js、test.html //a.js function abc(str){ alert&#40;str&#41;; } //test.html &lt;html&gt; &lt;head&gt; [removed][removed] [removed]...

    HTML调用OCX控件

    HTML调用OCX控件是一种在网页中使用ActiveX技术实现客户端交互功能的方法。ActiveX是微软开发的一种组件对象模型,OCX(OLE Custom Controls)是ActiveX的一部分,它允许开发者创建可重用的控件,这些控件可以在多种...

    SVG与html的交互(svg的js与html的js互调用).pdf

    第一个函数是 FunCallByHtmlJs,它是在 HTML 文件中调用的 SVG 文件的 JS 函数。第二个函数是 FunCallBySvgJs,它是在 SVG 文件中调用的 HTML 文件的 JS 函数。 在实现这两个函数时,我们使用了 JavaScript 语言来...

    HTML5 api 调用示例

    例如,`context.beginPath()`用于开始一个新的路径,`context.fillRect(x, y, width, height)`则用于绘制一个矩形。 2. **SVG (Scalable Vector Graphics) API**:SVG提供了一种在HTML文档中插入矢量图的方法,这些...

    Android原生java语句 和html js互相调用 传递参数

    Java端创建一个对象并暴露给JavaScript,JavaScript端通过`window对象`调用这些方法。同时,Android也可以通过`loadUrl`执行JavaScript代码。这种交互方式极大地扩展了`WebView`的功能,使得混合开发变得更加灵活。...

    android webview中使用Java调用JavaScript方法并获取返回值

    如果需要在WebView中启用JavaScript调用Android代码的功能,还要在addJavascriptInterface()方法中声明一个Java类的实例,并为其指定一个可以在JavaScript中访问的接口名字。 在Java代码中定义一个内部类,用于接收...

    echarts 图形数据调用 html 调用案例

    ECharts 是一个由百度开发的开源 JavaScript 数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,能够帮助开发者在网页上优雅地展示复杂的数据。在这个"echarts 图形数据调用 html 调用案例...

    在iframe中调用js父页面和子页面方法

    在网页开发中,`iframe`(Inline Frame)是一种嵌入其他HTML文档的元素,它允许我们在一个页面中显示另一个页面的内容。本篇文章将深入探讨如何在`iframe`中调用JavaScript,实现父页面与子页面之间的方法交互。 一...

    html5调用android

    这种交互通常通过Android的WebView组件实现,WebView是一个可以加载和显示网页内容的视图。在本示例中,我们探讨的是如何使用HTML5与Android的WebView结合,实现跨平台的通信。 1. **WebView组件**:Android的...

    HTML-引入Vue3和Element Plus

    在本项目中,我们主要探讨如何在HTML页面中引入Vue3框架和Element Plus UI库,以便构建一个功能丰富的前端应用。Vue3是Vue.js的最新版本,提供了许多性能优化和新特性,而Element Plus则是一个基于Vue3的高质量UI...

    在js文件中引入(调用)另一个js文件的三种方法

    以上就是在JavaScript文件中引入或调用另一个JS文件的三种常见方法。每种方法都有其适用场景,根据项目需求和环境选择合适的方式。对于大型项目,通常推荐使用模块化方法,因为它提供了更好的组织结构和可维护性。而...

    html调用com组件ocx,ocx回调html

    这通常需要在COM组件的接口中声明一个回调方法,并在HTML页面中设置该方法的实现。 5. **MFCActiveXCallback**:这个文件可能是示例项目的一部分,可能包含了一个基于Microsoft Foundation Class (MFC)库编写的...

    通过HTML调用OCX控件

    在本项目中,"ILExecuteProcessOCX"是一个由Visual Studio 2005编写的OCX控件,已通过在Windows XP下的测试。 首先,让我们详细了解HTML调用OCX控件的基本原理。在HTML页面中,可以通过ActiveX技术来引用并使用OCX...

    Html5调用摄像头读取二维码(全部源码)

    调用`navigator.mediaDevices.getUserMedia`方法,传入一个包含音视频类型的媒体流参数,就可以请求访问用户设备的摄像头。一旦用户同意,这个API会返回一个MediaStream对象,这个对象可以被用来展示在video元素中...

    vb中调用CHM的两种方法及源代码

    引入`Microsoft HTML Object Library`后,我们可以创建一个`IWebBrowser2`对象来加载CHM文件。以下是具体代码: ```vb Imports SHDocVw '必须引用SHDocVw.dll Public Class Form1 Private WithEvents browser As ...

    Html Js 调用 activex 控件 示例

    在提供的"HtmlDllTest"文件中,可能包含了一个HTML和JavaScript的示例,用于演示如何调用ActiveX控件。你可以打开这些文件查看具体的实现细节。在实际使用中,务必确保对ActiveX控件的安全性和权限进行了充分的考虑...

    jqueryAjax_无刷新调用另一页实例

    首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,通过在后台与服务器进行少量数据交换,可以...

Global site tag (gtag.js) - Google Analytics