Communication between ManagedIFramePanel and embedded iframe

最新推荐文章于 2011-03-17 16:07:47 发布

iteye_16595

最新推荐文章于 2011-03-17 16:07:47 发布

阅读量109

点赞数

文章标签： EXT JavaScript HTML XHTML ViewUI

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>