iframe中的子窗体调用父窗体中的方法

最新推荐文章于 2021-12-22 09:34:16 发布

blackocular

最新推荐文章于 2021-12-22 09:34:16 发布

阅读量2.7k

点赞数

文章标签： iframe javascript html 框架 function system

iFrame语法：

iframe 标签 -- 代表HTML内联框架

iframe 标签是成对出现的,以<iframe> 开始,</iframe> 结束
属性
- name -- 定义了内容页名称,此名称在框架页内链接时使用到
- src -- 定义了内容页URL
- frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1
  - 1 -- 在每个页面之间都显示边框
  - 0 -- 不显示边框
- marginwidth -- 定义了框架中HTML文件显示的上下边界的宽度,取值为px,缺省值由浏览器决定
- marginheight -- 定义了框架中HTML文件显示的左右边界的宽度,取值为px,缺省值由浏览器决定
- scrolling -- 定义是否有滚动条,取值为(yes|no|auto ),缺省值为auto
  - yes -- 显示滚动条
  - no -- 不显示滚动条
  - auto -- 当需要时再显示滚动条
- align -- 垂直或水平对齐方式
- height -- 框架的高度
- width -- 框架的宽度
引用网址:http://www.dreamdu.com/xhtml/tag_iframe/

示例

Html代码

<iframe src="http://www.dreamdu.com/xhtml/" width="200" height="500"></iframe>

<iframe src="http://www.dreamdu.com/xhtml/" width="200" height="500"></iframe>

主窗体：

Html代码

<html>
<HEAD>
<TITLE> CSI System </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function f1(str) {
alert("Hello, " + str + ", 我是 CSI System 的JavaScript Method!");
}
//-->
</SCRIPT>
<body>
<Iframe src="cti.html" width="250" height="200" scrolling="no" frameborder="1">
</iframe>
<h1 id="myH2">hello,I'm CSI!</h1>
</body>
</html>

<html>
 <HEAD>
  <TITLE> CSI System </TITLE>
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
	function	f1(str) {
		alert("Hello, " + str + ",  我是 CSI System 的JavaScript Method!");
	}
//-->
</SCRIPT>

	<body>
		<Iframe src="cti.html" width="250" height="200" scrolling="no" frameborder="1">
		</iframe>
		<h1 id="myH2">hello,I'm CSI!</h1>
	</body>
</html>

子窗体：

Html代码

<HTML>
<HEAD>
<TITLE> CTI System</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function f2(s) {
window.parent.f1(s);
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="">
<INPUT type="button" value="Click Me!" onclick="f2('CTI');">
</FORM>
I am in CTI System!
</BODY>
</HTML>

<HTML>
 <HEAD>
  <TITLE> CTI System</TITLE>
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
	function f2(s) {
		window.parent.f1(s);
	}
//-->
</SCRIPT>
 <BODY>

 <FORM METHOD=POST ACTION="">
	<INPUT type="button" value="Click Me!" οnclick="f2('CTI');">
 </FORM>
	 I am in CTI System!
 </BODY>
</HTML>

效果：

参考：

1、HTML <iframe> 标签

2、iframe 小问题引来大思考

3、iframe 详细参考文档

4、JavaScript改变iframe的属性(地址，高度，宽度)

5、js操作iframe的一些知识

6、iframe 父窗口和子窗口的调用方法

7、子窗口访问父窗口的自定义函数

8、DHTML参考手册：IFRAME 元素 | iframe 对象

9、iframe 的用法与注意事项

10、IFrame语法小全

11、用IFRAME实现网页的内嵌和预载

参考网页：http://www.cnblogs.com/waxdoll/articles/271018.html

5.2.6 JavaScript

Many web pages use JavaScript to perform complex interactions between the user and the page. It is important to know how to execute JavaScript functions from within Internet explorer. The simplest method is to use Navigate with the prefix javascript: then the function name. However, this does not give us a return value, nor will it work correctly in all situations.

We shall start with a HTML page, which contains a JavaScript function to display some text. This will be saved as JavaScript.html

Html代码

<html>
<span id="hiddenText" style="display:none">This was displayed by javascript</span>
<script language="javascript">
function jsFunction()
{
window.document.all["hiddenText"].style.display="block";
return "ok";
}
</script>
</html>

<html>
 <span id="hiddenText" style="display:none">This was displayed by javascript</span>
  <script language="javascript">
  function jsFunction()
  {
   window.document.all["hiddenText"].style.display="block";
   return "ok";
  }
 </script>
</html>

We can then use the Document.InvokeScript method to execute the JavaScript thus:

C# 2.0

C#代码

private void btnNavigate_Click(object sender, System.EventArgs e)
{
NavigateToUrlSync(@"C:/javascript.html");
string strRetVal = "";
strRetVal = (string)WebBrowser.Document.InvokeScript("jsFunction");
MessageBox.Show(strRetVal);
}

private void btnNavigate_Click(object sender, System.EventArgs e)
{
     NavigateToUrlSync(@"C:/javascript.html");
     string strRetVal = "";
     strRetVal = (string)WebBrowser.Document.InvokeScript("jsFunction");
     MessageBox.Show(strRetVal);
}

http://www.javaeye.com/topic/265347

blackocular

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iframe中的子窗体调用父窗体中的方法

iFrame语法： iframe 标签 -- 代表HTML内联框架iframe 标签是成对出现的,以开始, 结束属性 name -- 定义了内容页名称,此名称在框架页内链接时使用到 src -- 定义了内容页URL frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1 1 -- 在每个页面之间都显示边框 0 --
复制链接

扫一扫