if i have 2 HTML pages and i embed on of them (child page) inside the other(parent page) using iframe i can call function js function in the child from the parent using
window.parent.myfunction();
note: don't work on chrome
i need to apply this in visual studio light switch
i embed HTML page inside custom control element in light switch screen using iframe and i want to call JavaScript function from the custom control render to use it whit a button inside the iframe (onclick) .. i tried window.parent.myfunction(); but it didn't work.
the custom control render
myapp.LaunchURL.BigCustom_render = function (element, contentItem) {
element.innerHTML += '<div id ="mycontent" style="width:100%; height: 100%;"> </div>"';
document.getElementById("mycontent").innerHTML +=
'<iframe src="page.html" id ="myframe" name = "myframe" style="width:100%; height:100%;"></iframe>';
var iframe = $('iframe').contents();
iframe.find('#h2id').text("change the text please");
iframe.find('#A2').attr("value", "ok this works");
myapp.activeDataWorkspace.ApplicationData.Students.load().then(
function onComplete(result) {
var studentNames = "";
result.results.forEach(function (student) {
//alert(student.Name);
studentNames += (student.Name + " ");
});
// alert(studentNames);
iframe.find('#A1').attr("type", "text");
iframe.find('#A1').attr("value", studentNames);
}
);
function AlertOnChange()
{
alert("the student name changes");
}
//to have the entire webpage
$("iframe").parent().parent().css("width", "100%");
$("iframe").parent().parent().css("height", "1200px");
//to eliminate the header if you want to
$("span").parent().parent().parent().parent().parent().css("width", "0px");
$("span").parent().parent().parent().parent().parent().css("height", "0px");
};
the HTML page
<!DOCTYPE html>
<html>
<head>
<title>Dating Form</title>
</head>
<body>
<h2 id="h2id"> the students</h2>
<br />
<br />
<form>
<input type="button" value="Get Students" onclick="window.parent.AlertOnChange();"></input>
<br />
<br />
<input type="hidden" id="A1" name="A1" value="hidden" onchange="window.parent.AlertOnChange()"> Students Names </input>
<br />
<br />
<input type="text" id="A2" name="A2" value="text this text box"> textbox </input>
</form>
<script>
//function childAlertOnChange()
//{
// //window.parent.AlertOnChange();
//}
</script>
</body>
</html>
this button doesn't respond and doesn't do eny thing
i defined the function outside the custom control render and it works
this is my code