废话不说,直接上例子:
test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#show").click(function (){
var iframeObj = $(window.frames["iframe_name"].document);
alert(iframeObj.find("#un").val());
});
});
</script>
</head>
<body>
<input type="button" id="show" value="show" />
<iframe id="iframe_id" name="iframe_name" src="http://localhost/test/login.html"></iframe>
</body>
</html>
login.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
</head>
<body>
<form method="POST" action="#">
用户名:<input id="un" type="text" name="username" value="123d" />
密 码:<input type="text" name="password"/>
<input type="submit" value="提交">
</form>
</body>
</html>
注意:必须同源
分享到:
相关推荐
总结起来,要使用jQuery获取同源`iframe`内`body`下标签的值,首先需要确保`iframe`与父页面同源,然后可以通过`window.frames`获取`iframe`的`contentWindow`,接着访问其`document`对象,并用jQuery包装,最后使用...
1. **跨域限制**:由于同源策略的限制,如果`<iframe>`中的文档与当前页面不在同一域下,则无法直接访问到`<iframe>`的内容,因此需要确保两者的域名相同或者源文档支持跨域访问。 2. **性能考虑**:频繁调整`...
JSONP 是一种常用的跨域解决方案,它利用了浏览器对 `<script>` 标签的特殊处理能力。通常情况下,浏览器出于安全考虑,不允许通过 `XMLHttpRequest` 请求不同源的数据,即所谓的“同源策略”。然而,`<script>` ...
通常,我们会通过在`<head>`标签内添加以下代码来引入`jQuery`: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来,假设你有一个`iframe`元素,其`id`为`myIframe`,你...
<iframe id="iframeid" src="IFrame.aspx"></iframe> </form> </body> </html> ``` **子页面(IFrame.aspx)**: ```html <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits=...
在网页开发中,有时我们需要获取`iframe`元素的`src`属性值,特别是在涉及到跨域通信、页面嵌套或者动态加载内容的情况下。`jQuery`是一个非常流行的JavaScript库,提供了便捷的方式来操作DOM元素,包括获取`iframe`...
<iframe id="iframeid" src="IFrame.aspx"></iframe> </body> </html> ``` 在这个例子中,父页面定义了一个变量`hello`和一个函数`getHelloWorld`。 **示例2:子页面(IFrame.aspx)** ```html <!DOCTYPE html> ...
在网页开发中,有时我们需要动态地更改`<iframe>`...需要注意的是,由于同源策略的限制,只有当主页面与`<iframe>`加载的页面在同一域下时,才能直接操作`<iframe>`的内容。否则,需要考虑使用CORS或其他跨域解决方案。
<title>子页面(iframe)</title> <script> function readDataFromParent() { var data = parent.document.getElementById('textfield').value; alert(data); } </script> <body> <form id="form1"> <button ...
注意:由于同源策略的限制,只有当父页面和iframe页面位于同一域下,我们才能直接访问和操作iframe的内容。如果它们位于不同域下,这种跨域操作将受到浏览器的限制。 总结一下,jQuery提供了强大的DOM操作能力,...
var iframeBody = iframeContent.find("body"); ``` - **修改`iframe`中的元素样式**: ```javascript iframeContent.find("#elemId").css({"property": "value"}); ``` - **替换`iframe`的源地址**: ```...
然而,`iframe`在处理跨域内容时,会受到同源策略的限制,导致一些功能无法正常使用,比如获取iframe内的DOM元素或设置其高度。本文将详细讲解如何解决`iframe`跨域问题以及实现自动适应高度的功能。 1. **同源策略...
<body> <div class="page"> <div class="header"> <div id="title"> <h1>顶部</h1> </div> </div> <div class="MainContainer"> <div class="sidebar">边栏</div> <div id="main" class="main">内容</div> ...
<script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript"> var ifr = document.getElementById("iframe"); ifr.src = "http://www.b.com/data.html"; if (ifr....
但如果是同源策略下的`iframe`,则可以正常操作。 以下是一些常见的jQuery方法: 1. **在`iframe`子页面获取父页面元素**: ```javascript $('#objId', parent.document); ``` 这个例子中,`parent.document`...
`<iframe>`标签也可以用于跨域,通过改变`iframe`的`src`属性,可以加载不同源的页面。然后通过读取`iframe`的内容来获取数据。例如: ```html <body> <div id="show"></div> <iframe id="frame" style="display: ...
- **通过jQuery的find方法**:`$(window.frames["iframeName"].document).find("#testId")`这种方法也是用来查找iframe中的特定元素,其中`"iframeName"`是iframe的name属性值。 ### 示例代码 - **在父窗口操作...
当涉及到在页面中嵌入 iframe (内联框架) 的情况时,jQuery 提供了一些方法来帮助我们方便地访问和操作 iframe 中的元素。本文将详细探讨如何使用 jQuery 在父窗口和 iframe 之间进行交互。 1. **父窗口操作 iframe...
2. **资源嵌入**:使用`<link>`、`<script>`、`<img>`、`<frame>`等标签,以及CSS中的`background:url()`、`@font-face()`等引用外部资源。 3. **脚本请求**:JavaScript发起的AJAX请求,以及其他涉及DOM和JS对象的...