在做网页的时候，父页面 parent.html 中用到了iframe嵌套一个子页面 sub.html
刚开始的时候这两个页面都同时导入了 jquery.min.js 的文件，这样两个页面都可以使用jquery的对象
但是当浏览 parent.html 的时候会加载同一个 jquery.min.js 两次，这样貌似累赘了。
所以我希望就是在 parent.html 中导入一次 jquery.min.js 的文件就可以在 parent.html 和 sub.html 中使用
下面就是一些实验的代码：
父页面：parent.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" src="jquery.min.js"></script>
</head>
<body>
<iframe src="sub.html"></iframe>
</body>
</html>
子页面：sub.html
刚开始我是这样写的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
<script>
var $ = parent.window.$;
$(document).ready(function(){
var body= $("body",document);
var p = body.find("p");
var text = p.text();
alert(text);
})
</script>
</head>
<body>
<p>测试</p>
</body>
</html>
但是输出的是空值，而不是“测试”
原因可能是解析 sub.html 的时候，是从上而下执行的吧，所以
var body= $("body",document);//得到的对象是一个空对象
因此也就找不到 p 标签了
后来我试着改变 javascript 代码的位置，把它移到 body 标签的下面，如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
</head>
<body>
<p>测试</p>
</body>
<script>
var $ = parent.window.$;
$(document).ready(function(){
var body= $("body",document);
var p = body.find("p");
var text = p.text();
alert(text);
})
</script>
</html>
输出的结果是“测试”，正是我想要的结果。
接着我又试着
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
</head>
<body>
<p>测试</p>
</body>
<script>
var $ = parent.window.$;
var body= $("body",document);
var p = body.find("p");
var text = p.text();
alert(text);
</script>
</html>
同样输出“测试”，那么
$(document).ready()//这个方法是不起作用的了
因此需要把 javascript 的代码写在body之后，等body的内容完全生成后再执行 jquery 的代码才能实现想要的结果。
附加另外的一些测试：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sub.html</title>
</head>
<body>
<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
<p>测试4</p>
<p>测试5</p>
</body>
<script>
var $ = parent.window.$;
var body= $("body",document);
var p = body.find("p");
p.each(function(){
alert($(this).text());
})
</script>
</html>
分享到：
相关推荐
"jQuery 可读取本地文件的号码选择器"是一个实用的工具，它允许用户从本地文件系统选择号码文件，并在不丢失数据的情况下进行操作。这种功能尤其适用于那些需要大量输入或管理数据的场景，比如电话营销、客户管理等...
在“jQuery导入导出用户组数据代码”这个项目中，我们探讨的是如何使用jQuery来实现数据的导入和导出功能，这对于用户组数据管理尤其有用。以下是对这个主题的详细解释： 首先，`index.html`是项目的主网页文件，它...
**三、导入jQuery** 要使用jQuery，首先需要在HTML文档中引入jQuery库。在`<head>`标签内添加如下代码，即可加载jQuery 2.1.1版本： ```html <script src="https://code.jquery.com/jquery-2.1.1.js"></script> ``...
在"JQuery一键到Excel文件"的场景中，开发者可以利用JQuery选择器快速定位到网页中的表格元素，然后通过特定的插件或自定义脚本将这些数据转换为Excel兼容的格式。 标签 "JQuery" 指出这个功能是基于JQuery实现的，...
使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...
在Eclipse这样的集成开发环境中（IDE）导入jQuery文件，可以方便地在项目中使用它，从而提高开发效率。首先，你需要将`jquery-1.4.2.js`文件下载并保存到你的项目资源目录下。然后，在Eclipse中，打开你的HTML文件，...
"AJAX"（Asynchronous JavaScript and XML）是另一种关键的技术，它允许网页在不刷新整个页面的情况下，向服务器发送请求并更新部分数据。jQuery 提供了一套简单易用的 AJAX API，使得开发者无需深究底层细节，就能...
2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见性过滤选择器/27 2.2.6 属性过滤选择器/28 2.2.7 子元素过滤选择器/30 ...
- **初始化插件**: 使用jQuery选择器选中需要生成树形菜单的容器元素，然后调用proTree方法，并传入配置对象，包括数据源、配置项等。 - **调用API方法**: 如需在运行时对树进行操作，可以调用提供的API方法，如`...
在使用选择器时，需要注意一些事项，例如，一个jQuery对象不能直接使用DOM对象的方法，反之亦然。在必要时，需要对对象进行转换才能使用另一方的方法。 4. jQuery的优势： jQuery被描述为轻量级、拥有强大选择器、...
这个"jQuery导入导出用户组数据代码"的压缩包文件显然是与使用jQuery来实现用户组数据的导入和导出功能相关的。下面我们将深入探讨这个主题。 首先，用户组数据通常指的是在应用程序中定义的一组用户的集合，这些...
在选择器方面，笔记详细介绍了jQuery选择器的分类，包括基本选择器、过滤选择器、层次选择器和表单选择器。基本选择器用于选取具有特定属性的元素，而过滤选择器则提供了基于元素的位置、可见性、内容和属性等不同...
为了更好地利用这个插件，开发者需要对jQuery的基本概念有所了解，如选择器（用于选取页面元素）、DOM操作（添加、删除或修改元素）、事件处理（响应用户操作）和动画（创建视觉效果）。同时，掌握如何在Dreamweaver...
【jQuery选择器】 jQuery的选择器分为四类： 1. **基本选择器**：`$(‘#idname’)`, `$(‘.classname’)`, `$(‘p’)`, `$(‘*’)`, 组选择器如`$(‘#idname,.classname,divname,divname.classname p’)` 2. **层次...
在现代Web开发中，文件上传功能是不可或缺的一部分，尤其在大数据和多媒体分享的时代背景下，用户对于上传图片、文档和其他媒体文件的需求日益增长。`jQuery File Upload`是一个强大的前端文件上传插件，它允许用户...
根据描述，“使用 jQuery 和 Ajax 技术时需要导入该文件”，这意味着在使用这些技术之前，必须先将 jQuery 文件引入到项目中。通常，在 HTML 文件的 `<head>` 部分通过 `<script>` 标签引用 jQuery 文件： ```html ...
- **选择器**：JQuery提供了丰富的CSS选择器，使得选取DOM元素变得简单。 - **DOM操作**：包括添加、删除、修改DOM元素，以及遍历DOM树等。 - **事件处理**：简化了事件绑定和解绑，支持事件冒泡和事件委托。 - ...
现在，我们可以使用jQuery选择器选取表单元素，并调用`.ajaxSubmit()`方法实现异步提交： ```javascript $(document).ready(function() { $('#myForm').ajaxSubmit({ type: 'POST', // 可以设置请求类型，默认为...
jquery 日期选择器 将js放到需要引用插件的相同目录下，在需要引用的页面导入index.jsp上的js引用代码，需要引用日期选择插件的文本框的class=“datepicker”，引入index.jsp上的对应javascript代码，日期选择就做好...
例如，你可以使用简单的选择器和事件处理来改变元素的文本： ```javascript $(document).ready(function() { $("#myElement").click(function() { $(this).text("你点击了我！"); }); }); ``` - 在这里，`#...