We Keep Coding

On an <Object data> page, getting one pages on_click event to trigger a method in another page within the <Object data> page

I am converting an old classic ASP website to asp.net/C#. This weeks problem with the conversion involves
replacing frames. A webpage (parent) spawns a popup using window.open.I am triggering the popup from a button on a gridview that runs this javascript:
<script type="text/javascript">
function popup(url, Title){" "}
{
(popupwindow = window.open(
url,
Title,
"status=no,menubar=no,width=1000,height=700,resizable=yes,scrollbars=yes"
))
}
</script>
That popup uses Frames (See example)
<frameset framespacing="0" border="1" frameborder="1" rows="36,*,0">
<frame name="Header" scrolling="no" noresize="false" target="main" src="ContentModules/<%=fsHeader %>" marginwidth="0" marginheight="0">
<frameset cols="140,*">
<frameset rows="*,27%">
<frame name="Menu" target="main" src="ContentModules/<%= fsMenu %>" marginwidth="0" marginheight="0" scrolling="no">
<frame name="RevTable" src="ContentModules/<%= fsRevision %>">
</frameset>
<frame name="main" src="ContentModules/<%= fsMain %>" marginwidth="5" marginheight="5" scrolling="yes" target="_self">
</frameset>
</frameset>
This site needs to be HTML 5 compliant and work with I.E and Chrome. So far, I am able to do just that. However,
I cant use Frames and meet those objectives.
I replaced the frames with Object Data.
<div id="header" class="header">
<object data="https://localhost:44365/HEADER.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="main" class="row">
<div id="column2" class="column left">
<div id="left_top" class="left_top">
<object data="https://localhost:44365/MainMenu.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="left_bottom" class="left_bottom">
<object data="https://localhost:44365/RevTable.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
<div id="column1" class="column right">
<object data="https://localhost:44365/MAIN.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
This works great, however, there is a problem that I cant figure out. We need to edit/save the MAIN Page. The button
to save or edit is on the HEADER page. I cant figure out how to get a click event on the HEADER page to run a saving method
on the MAIN page.
In the original ASP version, they use an environmental variable to change the button text from EDIT to SAVE.
They then use javascript to reload the entire popup so that it comes up in edit mode (or Save mode). I am not very knowledgeable on Javascript, but this seems an overhead heavy way of doing things.
function EditForm() {
window.location =
"/default.asp?windid=<%=windID%>&id=<%=id%>&ver=<%=ver%>&action=EDIT";
}
If the button was on the MAIN page, it would just be a simple on_click event. However, we have to duplicate the look and feel of the legacy
website. This means triggering an action on the MAIN page from an on-click event on the HEADER page.
Any help would be greatly appreciated.
#yob Adding revised Code, erroring out with Unable to get property 'Content Window' of undefined or null reference.
VRVMAIN.aspx (The Parent Page with the < Object Data > for Header.aspx and Main(default.aspx) Pages)
function messageHandler(message) {
console.log(" main page handler: ");
var data = message["data"];
console.log(" caller:" + (data["caller"] || ""));
console.log(" caller:" + (data["data"] || ""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else {
attachEvent("onmessage", messageHandler);
}
function callMainPage(data) {
console.log(" Parent page(VRVMain.aspx) Calling Main(Default.aspx) Page");
document.querySelector('[data="https://localhost:44365/VRView/Content/types/default.aspx"]').contentWindow.postMessage(data, '*');
}
HEADER.aspx Page
function callContainer(){
console.log("calling container from header: ");
var data = { "caller": "header", "data": 1234 };
window.parent.postMessage(data, '*');
}
Default.aspx (Main Page)
function messageHandler(message){
console.log ( " main page(default) handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " data:" + ( data["data"] ||""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else
{
attachEvent("onmessage", messageHandler);
}

since browser will not allow accessing object page (see blocked a frame from accessing a cross-origin frame), you could post a message to main page:
for example, in your header page:
<html>
<body>
<div>
header
<a href="#" onclick="callMain()" >header click</a>
</div>
<div>
<div>start main</div><hr/>
<object data="main.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end main</div>
</div>
<script>
function callMain(){
console.log ( " calling main from header: ");
var data = {"caller":"header", "data":1234};
//this will not work - blocked a frame from accessing a cross-origin frame -> document.querySelector('[data="main.html"]').contentWindow.clickHandler(data);
//instead - post message
document.querySelector('[data="main.html"]').contentWindow.postMessage(data, '*');
}
</script>
</body>
</html>
then, your main page (main.html) can listen for posted messages and process them:
<html>
<body>
<div>
main content
</div>
<script>
function messageHandler(message){
console.log ( " main page handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " caller:" + ( data["data"] ||""));
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else
{
attachEvent("onmessage", messageHandler);
}
</script>
</body>
</html>
Edited, based on additional comments...
If you have an "outer" container page, hosting header and main pages, then your header page needs to post a message to container page, which in turn, posts a message to main page:
for example, outer.html
<html>
<body>
<div>
outer container
</div>
<div>
<div>start header</div><hr/>
<object data="header.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end header</div>
</div>
<div>
<div>start main</div><hr/>
<object data="main.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end main</div>
</div>
<script>
function messageHandler(message){
console.log ( " container page handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " caller:" + ( data["data"] ||""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
} else {
attachEvent("onmessage", messageHandler);
}
function callMainPage(data){
document.querySelector('[data="main.html"]').contentWindow.postMessage(data, '*');
}
</script>
</body>
and header page needs to post a message on click:
<html>
<body>
<div>
header
<a href="#" onclick="callContainer()" >header click</a>
</div>
<script>
function callContainer(){
console.log ( " calling container from header: ");
var data = {"caller":"header", "data":1234};
window.parent.postMessage(data, '*');
}
</script>
</body>
</html>

I thank you for your help, but I am going to close this as unworkable. Because the main page has a dynamic URL based on its query string, I don't think the Query Selector can get a reference to it. Even though the Parent knows it a Main.aspx, it dynamically changes to a different page.

How to load `google map` to `div` directly to container?

I require to load a map to my page. I have the URL for that which is :
https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en
if I paste the above url, I am getting the map loaded in the browser.
Same way I am trying to load this map in to my web page. But nothing loads..
what is the correct way to load the above map in to my web page?
Here is my try:
$(function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").load(mapURL);
});
Live Demo

Url is not directly load on div .So you can append iframe on div like this to load map.
$(function() {
var html = '<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"></iframe>';
$("#map").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'><map>
<div id='map1'><map>
Or If you don't want to use iframe you cane use embed tag.
var html='<embed src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width=200 height=200 />';
$("#map").append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>

You can trigger DIV load Event
HTML iframe Tag
The tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
$(function(){
$('div[onload]').trigger('onload');
});
function displayMap() {
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").append("<iframe src=" + mapURL +"></iframe>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div onload="displayMap()" id ="map"></div>
You can display your map without iframe
HTML object Tag
The tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
<div>
<object type="text/html" data="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width="800px" height="300px" style="overflow:auto;border:1px solid">
</object>
</div>
Difference between and tag

Try this,
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<iframe src="'+mapURL+'" height="450" width="600"></iframe>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<object data="'+mapURL+'" width="600" height="450" type="text/html">Loading Map</object>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<embed id="map" src="'+mapURL+'" width=600 height=450 />');
});

How to change Iframe height when clicked on button inside the iframe's content

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!

You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})

This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height

it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});

Reload iframe using javascript

I have a jsp page with iframe in it.
for example: worklist.jsp
<html>
<head>
<body>
<iframe height="15%" marginheight="0px" marginwidth="0px" scrolling="no" src="menuBanner.jsp" style="border:0; padding: 0px; position:absolute;" width="960px">
</iframe>
<div><button data-dojo-type="dijit.form.Button" value="Reload" id="reload" onclick="reload();">Reload</button></div>
</body></head></html>
On click of a button, i need to reload only iframe page.
I tried the below script, but its reloading the whole page(worklist.jsp)
function reload(){
location.reload();
}

You can update/refresh the iframe by setting the src to the current src.
Here is an example.
var test = document.getElementById('iframeId');
test.src = iframe.src;
This way works for cross domain. The example in the comments are less hacky if iFrames are on the same domain.

function reload( {
document.getElementById('iFrameID').contentDocument.location.reload(true);
}

you can try:
var iframe = document.getElementById('YourIFrameId');
iframe.src = iframe.src + '?c=' + Math.random();
i think without changing the src attribute you will not be able to reload your iframe.

You can do like this.
Get the iframe src and assign again to the src of the iframe
<script>
function test()
{
$('#subpage_frame').attr('src',$('#subpage_frame').attr('src')) ;
}
</script>
<iframe src="test.com" onload="Loaded();" id="subpage_frame"></iframe>
<button onclick="test();">Refresh button</button>

JavaScript Function - Change content in a DIV

I have a problem. I have this function:
function isDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html("#isDone");
}
}
The above code does NOT work. The code above is checking if the content in an iFrame is done loading.
What i want is to have a div that says if it is NOT loaded "NOT DONE..." but if it is loaded then output another DIV into the #loadingStatus div.
UPDATE:
This is my 100 % code.
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
function isDone()
{
if(isDone){
$("#loadingStatus").html("Waiting for your advertisements to load...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none">
</div>
</div>
<iframe onload="isDone()" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

You might be looking for:
$("#loadingStatus").html($("#isDone").html());
EDIT: In your code, isDone is a function, not a variable. From what I understand, you have to do something like:
$(document).ready(function() {
$("#loadingStatus").text("Waiting for your advertisements to load...");
});
function isDone()
{
$("#loadingStatus").html($("#isDone").html());
}

Because the function isn't called until the iFrame is loaded, the not loaded message will not appear.
You need to have some default text in the isDone div.

http://jsfiddle.net/sMGTU/
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
var iFrameLoaded=false;
function checkDone(iFrameLoaded)
{
iFrameLoaded
? $("#loadingStatus").html("Finished Loading")
: $("#loadingStatus").html("Waiting for your advertisements to load...");
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none"></div>
</div>
<iframe onload="checkDone(true);"
src="<?php echo $r['url']; ?>"
width="100%" height="90%"
scrolling="auto"
frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

Well, NOTDONE will never appear because there is no isDone variable that can evaluate true. Also it seems that that logic is reversed.
Instead, set the "not done" message when your main document loads, then replace it with the "done" message when the iFrame document loads:
// on document load:
$(function() {
// set "waiting" message:
$("#loadingStatus").html("Waiting for your advertisements to load...");
// on iframe load:
$('#myIFrame').load(function() {
// set "done waiting" message:
$("#loadingStatus").html($("#isDone").html());
});
});
That's it; that's all the Javascript you need. Take that horrid onLoad attribute out of your iframe markup and give the thing an ID:
<iframe id="myIFrame" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

function isDone()
{
if(isDone){
I think your problem may be that you have a boolean variable called isDone and your function definition variable is called isDone, one of these should be called something else.

Where is isDone variable set in the code? Do you have any load event handler for iframe?
Try this
$(function(){
$("#loadingStatus").html("Waiting for your advertisements to load...");
var isDone = false;
function checkIsDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
$("iframeSelector").load(function(){
isDone = true;
});
checkIsDone();
});

If you want to create a new div:
$("#loadingStatus").append($("<div/>").text("Done."));
If you want to move a div from somewhere else:
$("#loadingStatus").append($("#isDone"));
If you want to copy a div from somewhere else:
$("#loadingStatus").append($("#isDone").clone());
If you want to move the contents of an element:
$("#loadingStatus").append($("#isDone").children());
If you want to copy the contents of an element:
$("#loadingStatus").append($("#isDone").children().clone());
Update:
Seeing the rest of the code reveals some more problems with it. As you don't have any variable that determines if the content has loaded or not, and only call the function once the content is loaded, just put the code for changing the content in the function. Put the initial message directly in the element.
function isDone() {
$("#loadingStatus").append($("#isDone").children().clone());
}