I'm working on the following script. Basically I want to redirect a page to one of two choices, based on whether the browser has allowed a popup. I know that the following won't work because window.location needs to be called as the DOM loads, but I'm wondering if there is something I can use or if I need to rethink my approach
<script type="text/javascript">
function openwindow(){
var w = window.open("{INTERACTION}","interaction","resizable=0,width=800,height=600,status=0");
if(w){window.location = "carry on.html"};
if(!w){window.location = "blocked.html"};
}
</script>
</head>
<body>
<form>
<input type="submit" class="button" onClick="javascript: openwindow()" value="Begin" />
</form>
Thanks in advance
Giles
It isn't necessary to call it as the DOM loads. it works both when DOM is loading and when it is fully loaded:
<script>
window.onload = function(){
window.location = "http://google.com";
}
</script>
// during DOM loading:
<script>
window.location = "http://google.com";
</script>
Related
I'm making a webpage and when a button is clicked, it will delete every element inside the HTML element and append an iframe. Although, it doesn't seem to be working.
index.html:
<html id="html">
<head>
<script type="text/javascript" src="/freevpn/script.js"></script>
</head>
<body>
<input type="text" id="input" value="https://">
<button onclick="submit()">Go!</button>
</body>
</html>
script.js:
function submit() {
var submit = document.getElementById("submit");
var input = document.getElementById("input");
var iframe = document.createElement("iframe");
var html = document.getElementById("html");
iframe.setAttribute("src", input.value);
html.innerHTML = "";
html.appendChild(iframe);
iframe.requestFullscreen();
}
I'm not sure why this isn't working, but it has to be something. Thanks in advance!
NEW UPDATE: There were a few problems. It is linking to the javascript, I fixed the function, and I added parenthesis, but it doesn't seem to be updated in the browser. I've cleared my cache and everything, and it still isn't updating. My website is linked through Freenom, Cloudflare, Google Analytics and Search Console, so does it just take a while to update? And if so, is there a way to make it faster?
Try this, you are calling the function incorrectly.
You must use the () to call a function:
<button onclick="submit()">Go!</button>
function submit() {
var submit = document.getElementById("submit");
var input = document.getElementById("input");
var iframe = document.createElement("iframe");
var html = document.getElementById("html");
iframe.setAttribute("src", input.value);
html.innerHTML = "";
html.appendChild(iframe);
iframe.requestFullscreen();
}
<html id="html">
<head>
<script type="text/javascript" src="/freevpn/script.js"></script>
</head>
<body>
<input type="text" id="input" value="https://www.youtube.com/embed/_70Q-Xj3rEo">
<button onclick="submit()">Go!</button>
</body>
</html>
You are missing the parentheses when you are calling your JavaScript function. Try the below:
<button onclick="submit()">Go!</button>
Here is a handy reference for the onclick Event: https://www.w3schools.com/jsref/event_onclick.asp
Also it is a good idea to call put your <script> tag at the bottom of the body (i.e. below the button in your code snippet). This is because the Javascript file will be loaded first and the HTML elements may not have been created yet that you are accessing with the DOM.
My test.jsp file:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
</body>
</html>
My test.js file:
alert("HELLO");
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
When I load the test.jsp page the Hello alert appears just fine. However when I click on click me, nothing happens.
At the point your script is running, the rest of the DOM hasn't been created yet.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
Moving the script tag to the bottom is one way to fix that.
It works fine here. Try wrapping it in an onload event listener to ensure the DOM is ready when the document.getElementById is called on the mylink element.
window.addEventListener("load", function()
{
var myLink = document.getElementById('mylink');
myLink.onclick = function() {
alert("I am a pop up ! ");
}
});
<a href='#' id='mylink'>click me</a>
This is a common issue of timing on how things are loaded into the browser on your page. The browser will run scripts and load HTML as it encounters it from the top down. Your JS file is running at the very top of the page. This means, at the point of its execution, the A HREF tag doesn't exist when you create the onclick event. The big issue is that when you call this line:
document.getElementById('mylink');
That A HREF tag doesn't yet exist, because the browser hasn't yet made it down the page to that line to load the tag into memory (again, because your JS file is at the top of the page). It's a timing issue. That function call returns null, effectively.
You need to put the event handler creation either on an body.onload event or, since you are using the jQuery library, inside a document.ready event. This delays the onclick event creation until the tag is loaded into memory and ready. For example:
$(document).ready(function() {
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
});
I have an HTA, which in turn has an Iframe. We are loading an intranet website. A button in the HTA, when clicked, will automate some task. The first step is to login, wait for the next page to load, then perform next option. The main concern here is to know that the next page has been loaded completely, so that we can initiate the code related to page ?
Can some one shed light on how to achieve this. Just to repeat, IFrame is inside HTA.
Below is my code :
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="HTA"
SYSMENU="YES"
NAVIGABLE="YES"
>
<meta http-equiv="x-ua-compatible" content="ie=11">
<title>HTA</title>
<script type="text/javascript">
window.resizeTo(900,700);
</script>
<script type="text/javascript" >
function Start() {
var iframePage = document.getElementById("iframeid").contentDocument;
var userId = iframePage.getElementById("userid");
var passwd = iframePage.getElementById("pwd");
var form = iframePage.getElementById("login");
userId.value='aa';
passwd.value='bb';
form.submit();
var iframePages = document.getElementById("iframeid").contentDocument;
var targetContent = iframePages.getElementById ("ptifrmtgtframe").contentDocument;
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
}
function Show() {
document.getElementById("iframe").style.display = "block";
}
</script>
</head>
<body>
<form class="form" name="form">
<input class="links" type="button" value="Show PIA" onclick="Show();" />
<input class="links" type="button" value="Login" onclick="Start();" />
</form>
<br>
<div class="iframe" id="iframe" style="display:none">
<iframe application="no" src="my URL" width="600" height="600" id="iframeid">
</div>
</body>
</html>
I want that:
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
Should run, only after the page in the IFrame has loaded properly and completely, since only then the relevant feilds will be loaded. Or else, this will give error.
PS This is a PeopleSoft site.
Here is a simple example of calling code when the iframe has loaded. Check out the onload attribute of the iframe tag. Maybe you can integrate this into your HTA?
<head>
<script>
function frameLoaded() {
alert('frame loaded!');
};
</script>
</head>
<body>
<iframe id="frame" src="https://en.wikipedia.org/wiki/HTML_element#Frames" onload="frameLoaded(this)" />
</body>
If you have access to the page, use javascript inter-window communication to trigger the JS you need. The child iframe can tell the parent when to run java script.
From a pure PeopleSoft perspective you can use related action framework component events to do what you like, too, without customization.
I think you can check the code for related content as reference. Such as OpenRCService and onRCService. In PT_COMMON, the showModalDialog method also related to the RC function which have the logic to detect a iframe is loaded.
I redirected to download page (I used window.location() or window.location.href() or replace()), but after download happens it should again come back to same page. I tried using setTimeout, but in vain. Another thing I dont have a chance to write redirect in download.php.
Is there any solution for this requirement.
Thanks in advance...
Here is my sample code...
<html>
<head>
<meta http-equiv="refresh" content="5; URL=index.php">
<script type="text/javascript" language="JavaScript">
function doSomething(color)
{
//do something nice with params
document.body.style.background = color;
//alert('Hi......');
/*global window */
/*window.location = 'http://all-free-download.com/free-photos/in_love_cosmos_flower_garden_220378_download.html';*/
window.location.href = 'http://all-free-download.com/free-photos/in_love_cosmos_flower_garden_220378_download.html';
/*return false;*/
//header("location:javascript://history.go(-1)");
window.history.back(-1);
window.onload = function() { setTimeout("redirectPage()",3000);
/*return false;*/
window.location.replace("http://google.com");
document.body.style.background = red;
window.setTimeout(redirectPage(), 500);
}
function redirectPage(){
window.location='http://google.com';
}
function download(){
var url = 'http://all-free-download.com/free-photos/in_love_cosmos_flower_garden_220378_download.html';
var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
document.getElementById('frameDiv').innerHTML = htm;
}
</script>
</head>
<body>
This page does call a JavaScript function when the page is loaded,
without using the onload() event call.
<script type="text/javascript" language="JavaScript">
doSomething('blue');
</script>
</body>
</html>
You can go back a page (if it was the last page) by doing:
history.back();
Or store the page URL in sessionStorage (or localStorage) and use window.location.href() on the HTML5 web storage variable. If you move through multiple pages.
Although if the page download.php is a completely different page out of your control then there is nothing you can do. Once you leave a page, the code on that page is gone, and you can't do anything on other pages (imagine the security issues if you could). In that case your best best would be to just open the download page in a new tab.
I'm trying to use javascript to echo/return the domain name into a displayed document.
I found this code that works by using a button click
But I need it to run automatically when the page is loaded.
The idea is so I have an about page on a site with multiple domains.
So if someone loads foo.com the page says "About FOO.COM" and if someone loads BAR.COM it likewise says "About BAR.COM" on the fly.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to return the domain name of the server that loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.innerHTML=document.domain;
}
</script>
</body>
</html>
Just call the function immediately instead of putting it in an event handler.
myFunction();
with jquery:
<div id="yourbutton>your Button</div>
<script>
$(document).ready(function(){
$("#yourbutton").html(document.domain);
});
</script>
without jquery:
search for window.onload
...yay my first post on stackoverflow ;