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 prevent one iframe from working under another?

I'm using an iframe video system with tabs to separate them, the problem I had was that all iframes loaded when you entered that section. I found this answer among many others that could not solve the problem of simultaneous loading To Load a video embed using "onclick" function to optimize a web page but now the problem I have is that using the solution by jquery to choose option 1 (iframe) loads normally but if I press option 2 both continue loading, ie, option 1 continues loading under the other that was pressed.
The system where I'm applying it is Datalife Engine on a .tpl file, and jquery 1.8.2 that I can change it to a more current one but the result is the same
<script>
$(document).ready(function() {
$("#myButton").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
$(document).ready(function() {
$("#myButton1").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>
<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The final result is that option 1 is still loading below another option, I was trying options to reload iframes but those who bring videos with autoplay continue to load below the new chosen one

You can use the same iFrame and change it's src on click of several buttons.
Following is an example similar to yours with one iFrame and 3 buttons. Each button loads a different video in the same iFrame. I am using youtube video id to differentiate the videos.
$(function() {
$(".myButton").on("click", function() {
var videoId = $(this).data('video-id');
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>

Jquery firing after second click

I'm working on .NET MVC and I'm trying to play iframe video after clicking div(s).
HTML
<div class="entry-post" >
<h3 class="entry-title" style="cursor:pointer" onclick="$.Sakla.al('#("ifr"+item.Id)','#item.Link')" >
#item.Baslik <img src="~/Content/img/com.png" /> </h3>
<div class="entry-content" >
<iframe id="#("ifr"+item.Id)" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
<hr />
</div>
JS
<script type="text/javascript">
$(document).ready(function ($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function () {
$(this).parent().children(".entry-content").show(500);
$.Sakla = {
al: function (gelenifr,gelenlink) {
//alert(gelenifr + gelenlink);
var ifr = $('#'+gelenifr+'');
ifr.toggle(function () {
if (ifr.is(':visible')) ifr.attr('src', ''+gelenlink+'');
else ifr.attr('src', '')
})
}
}
});
});
</script>
All these what i have done so far. It works only after second click on div. So, what am i supposed to come up with ?

This is happening because you have two event handlers set up for ".entry-title".
One is inline in the HTML:
onclick="$.Sakla.al('#("ifr"+item.Id)','#item.Link')"
And one is being set up in the document.ready callback:
$(".entry-title").click(function () {
As #Sasang points out, if we look in the document.ready callback, we can see that this is where $.Sakla is being defined, so the onclick handler wouldn't work until after a click.
Inline HTML event handlers (onclick, onmouseover, etc.) should not be used. Instead register your event handlers in pure JavaScript with object.addEventListener() or with JQuery: object.on("eventName", callback)

How to run a script on image?

This script below slides and rebuilds a div with a Youtube video when I press a button.
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#slide_up').click(function(){
$('#slidingDiv').slideToggle('', function (){
var obj = $(this);
if(obj.is(':hidden')){
obj.html( obj.html() );
}
});
});
});//]]>
<div style="display: block;" id="slidingDiv">
<iframe src="http://www.youtube.com/embed/r13a2VUTajU" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</div>
<input value="Slide and rebuild" id="slide_up" type="button">
I want to use an image instead of a button.
How should I modify a script to run a slide function after I click on img?
Thanks ;)

<input value="Slide and rebuild" id="slide_up" type="image" src="yourimage.jpg">
This should work. Unless I didn't understand the question

You have to use the onclick attribute
<img src="your src" onclick="your javascript function" />

Hide form from parent page until specific iframe element ID loads

All I need is to show parent page form only if specific element ID loads inside iframe. parent/iframe are on the same domain. How can I achieve that using javascript?
<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]" />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>
<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

You can use jQuery to attach a load event to the iframe. Here's a working example: http://jsfiddle.net/kPqbS/

You can use something like this:
// wait for the page to finish loading
window.onload = function(){
// hide your form
document.getElementById('Search').style.display = 'none';
// get the document of the iframe
var frameDocument = document.getElementById('myiframe').contentWindow.document;
// if this is true the element with id 'test' is in the frame
if(frameDocument.getElementById('test')){
// show your form
document.getElementById('Search').style.display = 'block';
}
}