jq中load（）方法加载公共元素、iframe加载公共元素

最新推荐文章于 2023-03-14 13:10:56 发布

心如江水

最新推荐文章于 2023-03-14 13:10:56 发布

阅读量2.3k

点赞数 1

分类专栏： web前端文章标签： jq 前端开发网站开发

本文链接：https://blog.csdn.net/weixin_43088706/article/details/90640440

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jq中load()方法

在开发过程中很多的元素和内容都是重复的现在的vue、react、angluar的组件开发在很大的程度上就是为了解决这样的一部分问题的但是，框架的主要目的不完全是为了如此；

1、在网站开发过程中有的时候一个页面的头部可能在很多页面中公用，没有使用vue这些框架的情况下jq也是一个很好的工具，
单独创建一个页面例如header.html;
2、将一些公共元素放在header.html中样式和事件也可以放在改页面中click事件等或者a标签的href也可以放在其中；也可以都放在你将要引用的页面中都是可以生效的
3、在你需要该页面的位置添加这样的代码

	<div id="header"></div>
	<script src="js/jquery.js"></script>
	<script>
		//在这里需要注意路径
		$(".header").load("header.html");
	</script>

4、这样就解决了公共元素多余代码的问题了。
5、在load（）方法中可能有一个问题就是跨域，因为load()方法使用的ajax的方法加载的所以一些情况可能牵扯到跨域。
6、公共元素的事件尽量都放在当前的页面中切一定注意js事件不能在load()方法的前面不然浏览器会找不到相应的标签，您也可以在header中放置事件的。

还有一中方法就是：

iframe标签引用其他页面的方法；

使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        iframe{
            border: 0;
        }
    </style>
</head>
<body>
   <div style="margin:auto;">
       <h1>This is the Parent Page.</h1>
       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/> 
    </div>
    <div style="margin:auto;">
    	
       <iframe style="width:300px; height:300px;" id="childframe" src="childPage.html"></iframe>
    </div>
</body>
	<script language="javascript" type="text/javascript">
            function parenttest() {
                alert("这是父页面的方法！");
            }
            function btnClick() {
				alert("启动调用子页面的方法");
                document.getElementById("childframe").contentWindow.childtest();
            }
    </script>
</html>

需要注意的是iframe只是引用一个页面并不会将这个页面中的事件引用如何过需要引用事件就需要上面中用到的方法了------ document.getElementById(“此处放的是iframe的id”).contentWindow.childtest();--------------；

**iframe只是引用样式就像office中调用一个窗口而已，并不会同jq的load（）方法那样连带标签也可以解析在当前页面，因为使用iframe的位置放的还是iframe标签
**

心如江水

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq中load（）方法加载公共元素、iframe加载公共元素

jq中load()方法在开发过程中很多的元素和内容都是重复的现在的vue、react、angluar的组件开发在很大的程度上就是为了解决这样的一部分问题的但是，框架的主要目的不完全是为了如此；1、在网站开发过程中有的时候一个页面的头部可能在很多页面中公用，没有使用vue这些框架的情况下jq也是一个很好的工具，单独创建一个页面例如header.html;2、将一些公共元素放在header.h...
复制链接

扫一扫