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

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

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','*')

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Darrel on August 03, 2018, 10:49:30 AM