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>
Related
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>
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
I am brand new to JavaScript so bear with me. I have a JavaScript function that is on my page:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
</script>
It works perfectly when I use it as an event:
<input type="button" onclick="popup.show()" value="Edit Theme" style="float: right; margin-right: 7.25em;" />
I want to call it on page load, inside the body tag I have the following code:
<script>
window.onload = popup.show;
</script>
The method does not appear to get called. What am I doing wrong?
Based on the documentation on Sys.Require, it seems that Sys.Require is called on load, which means that based on the ASP.Net page lifetime the script hasn't loaded when the onload event fires.
It looks like you can use Sys.onReady() instead:
Sys.onReady(function(){
popup.show();
})
You should write:
window.onload = popup.show;
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");
});
I've got the following code in my page:
var offer_link = $('<a>').addClass('fc-offer-link');
offer_link.click(function() {
alert('Hello');
});
offer_link.attr('href', "#" + this.id);
offer_link.append(this.subject);
this.list_item = $('<li>');
this.list_item.append(offer_link);
But even though the link appears on the page, the handler never gets called. What's going on?
The problem turned out to be where the item got inserted into the DOM. It was being inserted using:
$('#my_list').html(my_new_list.html())
It should have been using:
$('#my_list').replaceWith(my_new_list)
I think you just need to append the link to an element, like this:
<script type="text/javascript">
$(function(){
var link = $("<a>Click Me!</a>").addClass("fc-offer-link").appendTo($("#div1"));
if (link){
link.click(function(){
alert("Hey there!");
});
}
});
</script>
<div id="div1"></div>
EDIT: Not sure why I was downvoted, but here's a jsFiddle