Iframe child sending data to parent and clearingtimeout - javascript

Hi Teams from all around,
I am most stumped on this issue.
I am attempting to use color box to create a pop up of a url through an iframe. (please not that the creative and source I have are the test pages, not actual subject). I am looking to have the iframe close after 12 seconds unless someone click within the iframe on the images within.
Basically it is a floater that will be for things such as group newsletters. I want to be able to just switch out the source page and have it available when the page first loads.
So, the page loads, starts the iframe floater, closes after (x) seconds unless someone clicks anywhere on the iframe, at that point they have to hit the close button.
I have been working on this for 2 days, and I either have it where the floater does not close at all or the floater refuses to stay open.
Please help.
And Much thanks in advance.
Preview Page:
http://matthewsallansdesign.com/Scripps/TestPageSETUP.html
Code on Parent Page:
<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
Var t;
window.onload = $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});
</script><script>
window.onload = $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 12000);
});
</script><script>
$(".iframe").click(function(){
alert("click");
clearTimeout(t);
};
</script>
<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>
Code on Child Page:
<script type="text/javascript">
$('body').click(function(){
parent.postMessage('alert','moooo');
});
</script>
<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png" />

Thanks,
I actually was semi close before.
Here is how I did it. I am leaving this here for future people to learn from and have a very easy time.
Allowing the future web developers to learn.
Parent:
<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
var t;
var iframeHost = "http://matthewsallansdesign.com"
if(typeof window.postMessage != 'undefined'){
var iframeListener = function (event) {
console.log(event);
if(iframeHost == event.origin){
clearTimeout(t);
}
}
if (window.addEventListener) {
addEventListener("message", iframeListener, false);
}
else {
attachEvent("onmessage", iframeListener);
}
}
window.onload = $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});
window.onload = $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 6000);
});
</script>
<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>
Child:
<script type="text/javascript">
$('body').click(function(){
parent.postMessage("HAMPSTERS",'*');
});
</script>
<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png">
The only thing anyone needs to actually do with this is replace the urls above.
I recommend everyone download the js and css on their own servers.
I will leave it up so others can find it.
Thanks,
Matthew

Related

Show loading while waiting for server

I want to modify a js script to be fired when the client is waiting for the server instead of fireing on loading. There you can see the script: FakeLoader.js, CSS
I found an ajax solution here, but I had no idea how to use it, as the script is inicialized in html. I think the key is at the end of the js file:
$(window).load(function(){
centerLoader();
$(window).resize(function(){
centerLoader();
});
});
On the html page, I have a text input field, which makes refresh on hitting enter, so I thought I could solve it by replacing the mentioned part with code from here :
$(document).keypress(function (e) {
if (e.which == 13) {
centerLoader();
$(window).resize(function(){
centerLoader();
});
}
});
This should fire the loader when enter was hit and show it while the server sends the new page, but instead it just does exatly the same thing before modifying the script, which is weird.
This is how it is initialized in html:
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
Could you give some idea? I am not good at js. Thank you.
I have a working sample with this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js"></script>
<link rel="stylesheet" href="http://joaopereirawd.github.io/fakeLoader.js/demo/css/fakeLoader.css" />
<script>
window.onload = () => {
document.body.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
$("#fakeLoader").fadeIn();
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
}
});
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
</body>
</html>
Obviously that's not how you will want the end result to look. It'll be better to move the fake loader part to a function and make the keyCode stuff cross browser. That'll get you started though.

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

In JavaScript, 'onbeforeunload' not working until we clicked on opened window

In JavaScript, 'onbeforeunload' not working until we clicked on opened window.
Please suggest me any solution.
Thanks in advance
Based on your comment, I don't think you're using it correctly. You need to return a string, not use an alert.
Parent page:
<script>
var w;
function x(){
w = window.open('test2.html');
}
</script>
<button onclick="x();">open</button>
<button onclick="w.close();">close</button>
Popup:
<html>
<head>
<script>
window.onbeforeunload=function (e) {
e.returnValue = "Are you sure you want to leave this page?";
return e.returnValue;
}
</script>
</head>
<body>
popup
</body>
</html>

Open window behind the parent window JS or PHP

I'm needing open a window behind parent window, and I'm not finding anything to do that.
Could someone help me with this code or tips?
Parent.php
<script type="text/javascript">
$(document).ready(function () {
window.name = "parent";
$('#link').click(function (event){
event.preventDefault();
window.open('child.php', 'fullscreen=yes', 'scrollbars=auto');
});
});
</script>
<body>
<a id="link" href="/">Open Window </a>
</body>
child.php
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
$('#link').click(function(event){
event.preventDefault();
console.log(window.opener.location);
var goBack = window.open('', 'parent');
goBack.focus();
});
});//]]>
</script>
<body>
<a id="link" href="#">Return to Parent </a>
</body>
LINK CODE: http://pontodosjogos.com/testegrana.php
You can use this code to display a pop-under window:
<script>
//specify page to pop-under
var popunder="http://yahoo.com";
//specify popunder window features
//set 1 to enable a particular feature, 0 to disable
var winfeatures="width=800,height=510,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1,directories=0";
function loadpopunder()
{
win2=window.open(popunder,"",winfeatures);
win2.blur();
window.focus();
}
loadpopunder();
</script>
Source: http://www.javascriptkit.com/script/script2/popunder.shtml
Keep in mind that browsers will likely block the pop-under window and it is generally annoying seeing those from a user's perspective so try to not overdo those.

do not display pop up window while navigating to another page

In my page a pop up window display of confirmation only when am going to close the browser/tab. It works for my page but it also ask while am going to navigate to another page. I want the pop up window when i close tab not while navigating to another page. Can anyone plz help me.
Here is code.
var PreventExitPop = false;
function ExitPop() {
if(PreventExitPop == false) {
PreventExitPop=true;
window.alert("hi!\n\click ok to go on next page");
var frm = document.forms['exitpopform'];
frm.action = 'deals.html';
frm.submit();
scroll(0, 0);
return "\n\n\n***************************************\n\n";
}
}
window.onbeforeunload = ExitPop;
</SCRIPT>
<form id='exitpopform' method='post' action='#'>
<input type='hidden' value='' />
</form>
Try Below Code for this.
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
window.onbeforeunload = null;
});
$(window).bind("beforeunload", function () {
return confirm("Do you really want to close?");
});
})
</script>
Above code will set NULL for onbeforeunload when any anchor tag is cliked throughout the website.
And if user will close browser/tab than it will raise the onbeforeunload function and it will show the popup with warning message.
For this this function you have to add JQuery reference into <head> tag of you HTML page as below.
<script src="your folder name/Javascript/jquery-1.8.2.js" type="text/javascript"></script>

Categories