Fetch value in easyui dialog frame from parent html [Solved]

[Darrel]

Hello Team,

I have a some fields with the ids, say, 'stud_name' and 'stud_age' on an html page. I'm calling a dialog box on submit, which has a frame, to show the details based on the stud_name field's value.
I want to access the value of the parent frame fields in the dialog box on successful load of the dialog box.

Code:

<!-- HTML Code -->
<div id="dlg" style="width:95%;height:80%;padding:10px;display:none" >
	<div id="iframe">
	</div>
</div>

Code:

//javascript code
function displayFrame(){
	var iframe_ = '<iframe src="somehtmlFile.html" frameborder="0" style="border:0;width:100%;height:99.4%;"></iframe>';

	$('#iframe').panel({
		content: iframe_,
		width: '100%',
		height: '100%'
	});

	$('#dlg').window({
		title: 'Details',
		width: '90%',
		height: '80%',
		closed: false,
		cache: false,
		modal: true,
		minimizable: false,
		onLoad: function(){}
	});
}

How can I access the stud_name/stud_age fields value in 'somehtmlFile.html' without passing it in the src of the frame or dialog box using pure javascript or jquery or easyui syntax.

Regards,
Darrel

[stworthy]

You should use postMessage to send data to the iframe.

1. In the iframe, build the message receive function.

Code:

window.addEventListener('message', function(data){
	console.log(data)
})

2. In the parent, get the <iframe> and post data.

Code:

$('#dlg').find('iframe')[0].contentWindow.postMessage('hello','*')

[Darrel]

Hello stworthy,

I was able to solve it using this concept. Thanks a lot.
Got to learn something new in frame communications...