`
wyj_study
  • 浏览: 80913 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在js中如何跨域访问frame的方法

阅读更多
一、父窗口调用iframe子窗口方法
1、HTML语法:<iframe name="myFrame" src="child.html"></iframe>
2、父窗口调用子窗口:myFrame.window.functionName();
3、子窗品调用父窗口:parent.functionName();
简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行
4、父窗口页面源码:
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
function say() {
alert("parent.html------>I'm at parent.html");
}
function callChild()
{
//document.frames("myFrame").f1();
myFrame.window.say();
}
</script>
</head>
<body>
<input type=button value="调用child.html中的函数say()" onclick="callChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

5、子窗口页面:
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
function say()
{
alert("child.html--->I'm at child.html");
}
function callParent() {
parent.say();
}
</script>
</head>
<body>
<input type=button value="调用parent.html中的say()函数" onclick="callParent()">
</body>
</html>

二、iframe 父窗口和子窗口相互的调用方法
1、IE中使用方法:
父窗口调用子窗口:iframe_ID.iframe_document_object.object_attribute = attribute_value
例子:onClick="iframe_text.myH1.innerText='http://www.pint.com';"
子窗口调用父窗口:parent.parent_document_object.object_attribute = attribute_value
例子:onclick="parent.myH1.innerText='http://www.pint.com';"
2、Firefox中使用方法:
上面在IE下没有问题,但在firefox下不正常。在firefox下,应该是如下调用方法:
父窗口调用子窗口:window.frames["iframe_ID"].document.getElementById("iframe_document_object"­).object_attribute = attribute_value
例: window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://hi.jb51.net/";
子窗口调用父窗口:parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例: parent.document.getElementById("myH1").innerHTML = "http://jb51.net/";
3、完整的例子
test.htm
复制代码 代码如下:
<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script language="javascript">
function show()
{
window.frames["iframe_text"].document.getElementById("myH1").innerHTML = "http://hi.jb51.net/";
}
</script>
</HEAD>
<BODY>
<iframe height="350" width="600" src="iframe_test.htm" name="iframe_text"></iframe>
<form action="" method="post">
<input name="haha" id="haha" type="text" maxlength="30" value="haha" />
<br />
<textarea cols="50" rows="5" id="getAttributeMethod"></textarea>
<input type="button" onClick="show();" value="提交"/>
</form>
<h1 id="myH1">d</h1>
</BODY>
</HTML>

frame_test.htm
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function show()
{
parent.document.getElementById("myH1").innerHTML = http://jb51.net/;
}
</script>
<body>
<h1 id="myH1">ha</h1>
<form action="" method="post">
<input name="abc" id="abc" type="text" maxlength="30" value="abc" />
<br />
<textarea cols="50" rows="10" id="text"></textarea>
<br />
<input type="button" value="提交" onclick="show();"/>
</form>
</body>
</html>

test.htm里面firefox下访问iframe 必须用name,不能用id,所以要改为name="iframe_test" 三、在c#中如何动态改变iframe的src值,动态指向一个网页
1)如果是javascript脚本
给iframe加一个ID如<iframe id=frmList……
在脚本写
frmList.document.location=strNewUrl
2)如果是后台程序
给iframe加一个ID,再加上runat=server 如<iframe id=frmList runat=server ……
在程序里写
frmList.Attributes.Add("src",strNewUrl);
分享到:
评论

相关推荐

    javascript跨域访问的方法.docx

    JavaScript跨域访问是Web开发中常见的一种挑战,由于浏览器的同源策略限制,一个域上的脚本不能直接获取或操作另一个域上的资源。为了解决这个问题,开发者通常采用以下三种主要方法:1. 基于iframe实现跨域2. JSONP...

    解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 &lt;asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....

    frame,iframe,中的js的相互访问示例

    本文将深入探讨如何在`frame`和`iframe`之间进行JavaScript(JS)的相互访问,以及相关的知识点。 1. **frame与iframe的区别** - `frame`是HTML4中的元素,它被用作`frameset`的一部分,用来分割窗口或框架。而`...

    高度自适应 跨域访问实例下载

    在IT行业中,跨域访问是Web开发中的一个重要概念,尤其对于前端开发者来说,这是一个常见的挑战。高度自适应则关乎到网站或应用在不同设备和屏幕尺寸下的表现。在这个"高度自适应跨域访问实例下载"中,我们看到三个...

    iframe跨域访问示例

    在Web开发中,"iframe跨域访问"是一个重要的概念,涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题,以便更好地理解和应用。 首先,我们需要了解什么是iframe。Iframe,全称Inline Frame,是HTML...

    怎样实现Ajax 跨域访问

    本文将详细介绍五种实现Ajax跨域访问的方法。 #### 一、使用JSONP(JSON with Padding) JSONP是一种常用的跨域数据获取方式,其原理是利用`&lt;script&gt;`标签没有跨域限制的特点来实现跨域请求。请求时,在URL中添加...

    在iframe、frame之间,js的相互访问、修改

    当我们谈论在`iframe`、`frame`之间通过JavaScript进行相互访问和修改时,涉及到的知识点主要包括DOM操作、跨域安全、同源策略以及一些特殊的技术和技巧。 1. 同源策略:同源策略是浏览器为了保障用户信息安全而...

    javascript 跨frame时间控件

    在跨frame环境下,JavaScript的`window.parent`、`window.frames`、`window.top`和`window.self`等属性可以帮助我们访问和操作其他frame。例如,如果要在父窗口中获取子窗口的时间控件值,可以这样做: ```...

    JavaScript跨域总结与解决办法

    ### JavaScript跨域总结与解决办法 #### 跨域的基本概念 跨域问题源自于浏览器的安全策略之一——**同源策略**。同源策略是浏览器为了防止恶意网站通过脚本访问其他网站的数据而采取的一种安全措施。它规定了一个...

    js操作frame进行消息提示

    标题中的“js操作frame进行消息提示”涉及到JavaScript在网页中跨框架通信的技术,这是一个重要的前端开发知识点。在多框架(frames或iframes)的网页结构中,JavaScript可以用来实现不同框架间的交互,如发送和接收...

    dom网页frame枚举

    - 遍历frame时,应考虑到可能存在的递归嵌套情况,即frame中又包含其他frame,需要进行深度遍历。 - 考虑性能问题,大量frame的遍历可能会消耗一定的时间和资源,因此在实际应用中需要谨慎处理。 总的来说,通过...

    frame之间进行参数传递例子

    在多层架构或分层设计中,frame也可以指代业务逻辑层、数据访问层等不同的组件。在这些组件间传递参数是确保程序正确通信的关键。 1. **基本参数传递方式**:在编程中,参数传递主要有三种方式:值传递、引用传递和...

    iframe 与主框架相互访问例子,同域、跨域访问例子。

    在网页开发中,`iframe`(Inline Frame)是一种嵌入式框架,允许我们在一个HTML页面中加载另一个HTML页面。这通常用于实现页面的部分更新、显示外部内容或创建多文档界面。`iframe`与主框架之间的交互是Web开发中的...

    pdfjs跨域展示文件-支持移动端,微信端

    PDF.js是Mozilla开发的一个开源库,它允许在Web浏览器中以纯JavaScript方式渲染PDF文档,无需依赖任何插件。这个库特别适用于跨平台和跨浏览器的PDF文件展示,包括移动端和微信端。在处理PDF文件时,由于浏览器的...

    iframe与主框架跨域相互访问

    在Web开发中,`iframe`(Inline Frame)是一种嵌入网页的HTML元素,它允许我们在一个页面中加载另一个页面的内容。这种技术常用于实现页面组件、广告展示、地图集成等功能。然而,当`iframe`中的页面与包含它的主...

    跨frame操作dom元素

    通过在源frame中发送消息,然后在目标frame中监听`message`事件,可以实现不同源的frame之间的数据交换。例如: ```javascript // 发送消息 window.parent.postMessage('Hello', 'https://example.com'); // ...

    frame之间以及子页面和父页面间参数传递

    ### Frame之间及子页面与父...通过上述介绍,我们可以看到在JSP页面中实现`frame`之间或子页面与父页面之间的参数传递有多种方法,每种方法都有其适用场景。在实际开发过程中,可以根据具体需求选择合适的技术方案。

    iframe 跨域

    在Web开发中,`iframe`(Inline Frame)是一种嵌入其他HTML文档的元素,常用于在页面中展示第三方内容或实现页面的分层结构。然而,由于浏览器的同源策略限制,当`iframe`加载的页面与包含它的父页面不在同一个域时...

    frame框架示例

    在本示例中,"frame框架示例"将展示如何有效地利用`frame`技术来构建多窗口的网页布局。 `frame`框架是HTML4的一个特性,虽然在HTML5中已被废弃,但在许多现存网站中仍然广泛使用。它通过`&lt;frameset&gt;`元素来定义...

    如何在框架(frame)页面之间使用appendChild()?

    在处理框架页面间交互时,JavaScript的`appendChild()`方法是一个非常实用的工具,它允许我们在DOM(文档对象模型)中添加新的元素。本篇文章将详细探讨如何在框架页面之间使用`appendChild()`。 首先,理解`...

Global site tag (gtag.js) - Google Analytics