`
hellofz
  • 浏览: 1143 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Communication between ManagedIFramePanel and embedded iframe

EXTJavaScriptHTMLXHTML 
阅读更多
Hi all;

I want to communicate between ManagedIFramePanel and embedded iframe;

Anyone could tell me how to do it?

Fllowing is my code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test Iframe</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
 	<!-- LIBS -->
 	<script type="text/javascript" src="../js/core/adapter/ext-base.js"></script>
	<script type="text/javascript" src="../js/core/ext-all.js"></script>
	
	<!-- Test extensions  -->
	<script type="text/javascript" src="../js/extensions/Ext.ux.ManagedIFrame.js"></script>
	<script type="text/javascript" src="../js/extensions/mifmsg.js"></script>
	<script type="text/javascript" src="ts-iframe.js"></script>
</head>
<body>
<div id="test-iframe"></div>
</body>
</html>


javascript is(ts-iframe.js): 
Ext.ux.TestIframePanel = Ext.extend(Ext.ux.ManagedIFramePanel, {
	
	initComponent: function(){
		
		this.tbar = [{
			text: 'Send',
			scope: this,
			handler: function(){
				this.fireEvent('send');				
			}
		}];
		
		Ext.ux.TestIframePanel.superclass.initComponent.call(this);
		
		
		this.addEvents('send', 'receive');
	},
	
	
	initEvents: function(){
		Ext.ux.TestIframePanel.superclass.initEvents.call(this);
		
		this.on('send', function(){
			alert('I want to send message to embedded page: test.html');
		}, this);
		
		this.on('receive', function(){
			alert('I want to receive message from embedded page');
		});
	}
});

Ext.onReady(function(){
	Ext.QuickTips.init();
	
	var iframePanel = new Ext.ux.TestIframePanel({
		defaultSrc: 'test.html',
		disableMessaging: false,
		renderTo: 'test-iframe',
		width: 600,
		height:400
	});
});


The embedded page is: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT">
<script language="javascript">
function send(){
	//I want to send message to TestIframePanel
}
function receive(message){
	//I want to receive message from TestIframePanel here!
	document.getElementById('logger').innerHTML = message.data;
}
</script>
</head>
<body text="#000000" bgcolor="#ffffff" link="#00000" vlink="#00000">
<a href="javascript:send();">Send Message to TestIframePanel</a><br />
<div id="logger"></div>
</div>

</body>
</html>


Thanks a lot!
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics