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.
Related
I'm trying to follow Stripe documentation, while developing one feature, but I've encounter a problem with a communication between a webpage and an iframe.
index.html:
<!DOCTYPE html>
<body>
parent<br>
<iframe src="./sca-iframe.html" width="100" height="100" ></iframe>
</body>
<script>
debugger
function on3DSComplete() {
debugger
console.log("Event received!!!!")
}
window.addEventListener('3DS-authentication-complete', on3DSComplete, false);
</script>
</html>
iframe:
<!DOCTYPE html>
<body>
iframe
<script>
debugger
window.top.postMessage('3DS-authentication-complete');
console.log("postMessage('3DS-authentication-complete')")
</script>
</body>
</html>
Where is a problem? I cannot find it :(
Plunkr:
http://embed.plnkr.co/0CLhHnncF4Ntsif0u9zY/
http://run.plnkr.co/preview/cjzi23ugh0005315uxn7fj6od/
Github example repo:
https://github.com/noisy/strie-customize-the-3d-secure-ui-test
There is nothing that will fire a 3DS-authentication-complete event here.
What you want is to listen to the message event. However since this event may be fired by multiple sources, you'd be better check the integrity of th message content.
So you'll end up with something like:
function on3DSComplete() {
console.log("Event received!!!!")
}
window.addEventListener('message', function(event) {
if(event.origin === location.origin &&
event.data === "3DS-authentication-complete") {
on3DSComplete();
}
});
function on3DSComplete() {
console.log("Event received!!!!")
}
function waitFor3DSMessage(event) {
if(event.data === "3DS-authentication-complete") {
on3DSComplete();
// in case we don't need to listen anymore
window.removeEventListener('message', waitFor3DSMessage);
}
}
window.addEventListener('message', waitFor3DSMessage);
const framecontent = `<!DOCTYPE html>
<body>
iframe
<script>
// in StackSnippet we need to use 'parent', because 'top' is the actual Q/A page
parent.postMessage('3DS-authentication-complete', '*');
<\/script>
</body>
</html>`;
document.getElementById('frame').src = URL.createObjectURL(new Blob([framecontent], {type: 'text/html'}));
parent
<iframe id="frame"></iframe>
Try window.parent.postMessage('3DS-authentication-complete', '*'); instead maybe when posting the message ?
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 want to "catch" the very first moment when the <body> has created. I've tried using DOMNodeInserted / DOMNodeInsertedIntoDocument. here's my code:
<html>
<head>
<script>
document.addEventListener("DOMNodeInserted", handleDomInserted, true);
document.addEventListener("DOMNodeInsertedIntoDocument", handleDOMNodeInsertedIntoDocument, true);
function handleDOMNodeInsertedIntoDocument(e) {
console.log(e);
}
function handleDomInserted(e) {
console.log(e);
}
</script>
</head>
<body>
<div id="foo">
<span id="bazz"></span>
</div>
</body>
</html>
Why do those functions never get called?
The code is correct but JavaScript events are NOT fired when the HTML is initially parsed by the browser. JS evens will only fire when DOM manipulation is done by JS.
E.g. if you add the following to the code sample, the event will fire:
<script>
var d = document.createElement('div');
d.innerHTML = 'test';
document.body.appendChild(d);
</script>
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");
});