Functioning onclick method for iframe - javascript

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

Related

add `load` event for EVERY iFrame on a page

I have a page that has dynamically added iFrames in it. I want to catch the "onLoad" event for every iFrame.
So basically, I want to attach the event to the body but have it apply to every child iFrame. This works for other events, but it seems like the "load" event isn't propagating.
Here's what I've tried so far:
$(document).on("load", "iframe", function() {
$("body").append("this is what I want, but it doesn't work!");
});
var iFrame = $("<iframe/>", {
srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});
$("body").append(iFrame);
iFrame.on("load",function(){
$("body").append("this seems to work.... but isn't what I'm looking for.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and here it is on jsfiddle:
https://jsfiddle.net/skeets23/qsrf802z/8/
Any way to get this working as expected? So I can just create one binding and have it work for any number of dynamically added iFrames?
Seems you want to add iframe dynamically, so, best method is catch event DOMNodeInserted of document. See example follow:
$(document).on('DOMNodeInserted', function(e) {
//check is iframe is loaded
if(e.target.localName=="iframe"){
console.log("New iframe loaded!");
$("div").append("this does NOT seem to work!");
};
});
function addIframe(){
var iFrame = $("<iframe />", {
srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});
$("body").append(iFrame);
iFrame.on("load",function(){
$("div").append("this seems to work....");
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addIframe();">Add Iframe</button>
<div>
</div>
Change $(document).on("load" ... to $("iframe").on("load", .... And place it at end of script, it will work!
var iFrame = $("<iframe />", {
srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});
$("body").append(iFrame);
iFrame.on("load",function(){
$("div").append("this seems to work....");
//alert("cde");
});
$("iframe").on("load", function () {
$("div").append("this does NOT seem to work!");
alert("abc");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

How to call a function when a div is dynamically generated using jQuery

The scenario I want to achieve is as follow:
$("#parentDiv").on("load",'#childDiv', function () {
// do something...
});
I would like to call a function when a child div is dynamically generated and shown on the page, but there is no suitable event that can achieve this. Any hint or help would be appreciated.
Instead of load, you can make use of a custom event which gets triggered with .trigger():
$(document).ready(function() {
$("button").on("click", function() {
$("body").append("<div id='new'>Created</div>").trigger('custom-event');
});
});
$(document).on("custom-event", function() {
console.log('DIV created!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Create element</button>
</body>

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 copy the content to clipboard using jquery

I have the link ,when i click the link i have to copy the content to clipboard.
I am using below code but it is not copying.Any other code exist for copy to clipboard.I had tested so many codes ,but none of them useful.
<script src="jquery.js"></script>
<script src="jquery.clipboard.js"></script>
<script>
$(document).ready(function() {
$("#val_link").click(function () {
alert("Hello!");
$("#val_link").clipboard({
path: 'jquery.clipboard.swf',
copy: function() {
alert("Text copied.");
return $("div#some-content").text();
}
});
});
});
</script>
Link
<div id="some-content">Text content to copy</div>
You can do something like this:
http://www.shirmanov.com/2010/09/copy-to-clipboard-in-htmljavascript-and.html
The .clipboard() function does the attaching of the click handlers for you. but it attaches it to an invisible element that it puts over the top of #val_link, in your case.
So, you have to put a click handler on #val_link to prevent its default use.
Then outside of that you add the clipboard function to it.
Essentially what you were doing was on click bind the clipboard handlers - my guess is if you clicked the link again then it would copy correctly, but then bind another set of events.
try:
<script src="jquery.js"></script>
<script src="jquery.clipboard.js"></script>
<script>
$(document).ready(function() {
$("#val_link").click(function (o) {
o.preventDefault();
});
$("#val_link").clipboard({
path: 'jquery.clipboard.swf',
copy: function() {
alert("Text copied.");
return $("div#some-content").text();
}
});
});
</script>
Link
<div id="some-content">Text content to copy</div>

Capture clicks with parent form from iframe

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");
});

Categories