Capture clicks with parent form from iframe - javascript

I have a parent page with an iframe in it. Inside the iframe is a single tag. On the parent page, can I fire an event when that tag is pressed? I know that if I place the javascript that captures the event inside the iframe then it will work, but for my project I need to have the parent page capture it.
This is my code so far.
Parent Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $MyFrame= $("#myiframe");
$MyFrame.on("click", "a", function (e) {
alert("hello");
});
</script>
</head>
<body>
<iframe id="myiframe" height="3500" width="950" src="Iframe page" frameborder="0" style="display: block; margin: 10px auto;"></iframe>
</body>
</html>
This is my page in the iframe:
<html>
<head>
</head>
<body>
Click Me!
</body>
</html>
Is this possible?

var $MyFrame = $("#myiframe");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
frameBody.find('a').click(function () {
// here is the iframe a click callback
alert("hello");
});
});

Not sure but this could help you with .contents() if frame source is at same origin:
var $MyFrame= $("#myiframe");
$MyFrame.contents().find('a').on("click", function (e) {
alert("hello");
});
and i noticed that you have assigned an id and you are referencing that frame with class.

your myiframe is id and not class.. use id selector #
try this
var $MyFrame= $("#myiframe");
$MyFrame.on("click", "a", function (e) {
alert("hello");
});

Related

New window without focus

I know this question has been "answered" multiple times, but nothing works in my case. I have tried with focus(),blur(). ect...I am using IE 11. Anyone have any idea? I want to open a new window, but keep focus on the original window....
btn.addEventListener("click", function (ev) {
var url = "https://XXXX/XXXXX/XXXXXX/";
var newWin = window.open(url, "_blank");
window.focus();
ev.stopPropagation();
}, true);
Try to refer example below may work for you.
Code in parent page.
<html>
<head>
<script language="JavaScript" type="text/javascript">
function openPopUP() {
window.open('C:\\Users\\Administrator\\Desktop\\95.html','NewWin',
'toolbar=no,status=no,width=350,height=135')
}
</script>
</head>
<body>
Original Page:<br>
Click to open popup
</body>
</html>
Code in child page.
<html>
<head>
<script>
function abc()
{
window.parent.opener.focus();
}
</script>
</head>
<body onLoad="abc()">
child page
</body>
</html>

Rewrite random/button Javascript without jQuery

I’ve this script. It works fine in this situation, but it seems to conflict with other scripts in the site I'm working on. How can I rewrite it that it doesn't need jQuery / OnLoad?
This is what it does: the button opens a random link from an array in a new window everytime you click on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<title>TestBase</title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
$("#rnd_link").click(function(){
window.open(links[Math.floor((Math.random()*3))]);
});
});//]]>
</script>
</head>
<body>
<button id="rnd_link">Random</button>
</body>
</html>
window.onload = function(){
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
var btn = document.getElementById('rnd_link');
btn.onclick = function(){
window.open(links[Math.floor((Math.random()*3))]);
}
}//]]>
Should work.
This works:
<script type='text/javascript'>
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
window.addEventListener('load', function() {
document.getElementById("rnd_link").onclick = function() {
window.open(links[Math.floor((Math.random()*3))]);
};
});
</script>
If you just want to avoid using jQuery, I suggest using window.onload to trigger the function when the page loads.
window.onload = function(){
// do stuff
};
Then in order to select a DOM element, you'll use the getElementById() method, then you'll add an event listener for a mouseclick:
document.getElementById("rnd_link").addEventListener("click", function(){
// do stuff
});
Here's the MDN entry for event listeners for further reading: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
I'd suggest this:
Call the function when the button is clicked.
<button id="rnd_link" onclick="random()"></button>
<script>
var links = [
"http://vetteletters.nl",
"http://todont.co",
"http://planetx.nl/titles"
];
function random(){
window.open(links[Math.floor((Math.random()*3))]);
}
</script>
More info for onclick here

Functioning onclick method for iframe

I've been searching everywhere for a solution for this, but all the solutions I've found haven't worked. I want to get the clicks that happen within the iframe that I have in the document. I get the "document ready" alert but I never get the "iframe clicked" alert no matter where I click. I am using ASP.NET MVC 5. Here's the code:
#Scripts.Render("~/bundles/jquery")
#{
ViewBag.Title = "Home Page";
}
<div id="terminal-iframe-wrap" class="map-info-wrapper" style="display: none">
<iframe name="terminal-iframe" id="terminal-iframe" class="terminal-url-wrapper" frameBorder="0"></iframe>
</div>
<div id="all-terminals-view" class="map-info-wrapper">
<div id="map" class="map"></div>
</div>
#section scripts
{
<script src="~/Scripts/lib/promise.min.js"></script>
<script src="~/Scripts/lib/fetch.js"></script>
<script src="~/Scripts/app/map.js"></script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=somethingsomething&callback=initMap"></script>
<script>
$(document).ready(function () {
alert("document ready.");
document.getElementById('terminal-iframe').contentWindow.document.body.onclick = function (event) {
alert("iframe clicked");
if (e.target.id != "right-side-menu" && !$(e.target).parents("#right-side-menu").size()) {
if ($('#right-side-menu').hasClass('in')) {
$('#right-side-menu').collapse('hide');
}
}
};
});
</script>
}
You can use it like:
jQuery has a method, called .contents(), that when used on an iframe element returns the document of the iframe.
// Get a reference to the iframe document
var iframeDoc = $('#iFrame').contents().get(0);
// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
// do something
});
This will work for you.
For more details you can visit: http://api.jquery.com/contents/
Your javascript code seen to be OK, see the codepen below:
http://codepen.io/anon/pen/ryWoKX?editors=1010
$(document).ready(function () {
document
.getElementById('terminal-iframe')
.contentWindow.document.body.onclick = function (event) {
console.log('clicked !');
};
});
your problem is that you have a "display:none" in #terminal-iframe-wrap

Accessing iframe parent within iframe without id [duplicate]

I have a wrapperPage.html with an <iframe class="header" and <iframe class="pageBody". In header there is a link, <a class="clearLink", which when clicked should clear the contents of pageBody.
So far the following implementation of the above idea doesn't work. Please help me resolve this.
Please NOTE that, header and pageBody are each loaded from different included files.
wrapperPage.html
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
header.html :
<script type="text/javascript">
$(document).ready(function() {
$(".clearLink").on("click", function() {
$('.pageBody').contents().find("body").html('');
});
});
</script>
<a class="clearLink" href="#">Navigation Button</a>
pageBody.html :
<div class="panel-body">This is the body</div>
Try using Channel messaging
wrapperPage.html
<body>
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
<script>
var channel = new MessageChannel();
var header = $(".header")[0].contentWindow;
var pageBody = $(".pageBody")[0].contentWindow;
header.onload = function() {
this.postMessage("","*", [channel.port2])
};
channel.port1.onmessage = function(e) {
if (e.data === "clicked") {
$(pageBody.document.body).html("")
}
}
</script>
</body>
header.html
<body>
<a class="clearLink" href="#">Navigation Button</a>
<script>
var port;
onmessage = function(e) {
port = e.ports[0];
}
$(".clearLink").on("click", function(e) {
port.postMessage("clicked");
});
</script>
</body>
You can get the reference of the main window from an iFrame as follow:
Window.Parent reference
Then, you can assign an event to catch a trigger or a function in the main window (or only in the other iFrame) to manage it.
For example :
Write a function in pageBody.html associated to a custom event.
Get window reference from your click function in your header.html iFrame.
Search target element which has your custom event assigned.
Fire the event
I would hope it help you.

How to handle body onload event in <head> tag

I am using sitemesh in our application. In decorator jsp I have added <decorator:head> in head and on body tag:
<body onload="<decorator:getProperty property='body.onload'/>" >
So I want to handle body onload on my jsp page.
I have added following things:
<script type="text/javascript">
function init() {
alert("hi");
}
</script>
</head>
<body onload="javascript:init();">
But init() does not worked in my jsp page.
Why not just stick it all into the script element? Much cleaner than mucking about with element attributes:
window.onload = function() {
alert('hi');
};
Or, alternatively, keeping the init declaration:
window.onload = init;
try this
<script type="text/javascript">
function init() {
alert("hi");
}
</script>
</head>
<body onload="init();">

Categories