I am currently working on a Cordova project in Visual Studio. In this project, I am trying building 2 html pages, let me call them first.html and second.html.
In the first.html, I want to add a link to second.html, which allows me to navigate to second.html. I tried 2 ways.
window.location
window.location = "second.html"
tag
<a href=“second.html”></a>
As a result, they both caused an error saying "Exception occurred
Message: Exception: Cannot redefine property: org".
Can anyone tell me how to navigate to a new page properly?
You can navigate to another page using window.location.href. An example is shown below
function(){ window.location.href = "second.html";}
try this it work's for me
<!DOCTYPE HTML>
<html>
<head>
<title>My PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady()
{
// navigator.notification.alert("PhoneGap is working");
}
function callAnothePage()
{
window.location = "test.html";
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
<button name="buttonClick" onclick="callAnothePage()">Click Me!</button>
</body>
</html>
You can use the below line to navigate one page to another page.
$('#yourelement').click(function(){
window.location.assign('name_of_page.html');
});
Try this:
window.open("second.html");
window.open opens a new window/tab with the selected URL, while the mentioned method in the question redirects the current page to the selected URL.
Related
How to call a javascript function(Jitsi Meet API) on button click and open the result(meeting) in a new window, in this case the function has to open up a new Jitsi meeting
I have a javascript function that calls the Jitsi Meet API and opens up or launches a new meeting on button click?
//Javascript function to launch the meeting on the button click
$('#btnStart').on('click',function(){
Launch();//need to open the new window here and execute this function in new page
});
As of now, the meeting launches on the same page, It would be really helpful if the meeting opens up in a new window on button click.
In simple terms, button click on this page should open up a new window and execute the function in the new window. I want to know how this can be achieved and by using what method.Do guide with an example snippet
Thanks in advance
<html>
<head>
<title>Launch Page</title>>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="javascript.js"></script>
<script>
$('#btnStart').on('click',function(){
Launch();
});
</script>
</head>
<body >
<div id='meet'>
<button id='btnStart' class ="button">Launch</button>
</div>>
</body>
</html>
Below is the function and the file that has to be executed in a new window on button click- javascript.js
var api=null;
function Launch(){
const domain = 'your.domain.com'
const options = {
roomName:'room123',
width: "100%",
height: "100%",
parentNode:document.querySelector('#meet'),
interfaceConfigOverwrite: { SHOW_JITSI_WATERMARK: true,SHOW_WATERMARK_FOR_GUESTS: true, DEFAULT_BACKGROUND: "#212529",
DEFAULT_LOCAL_DISPLAY_NAME: 'oc' ,TOOLBAR_BUTTONS: [
'microphone', 'camera', 'desktop', 'fullscreen',
'fodeviceselection', 'recording', 'profile', 'chat',
'settings', 'raisehand','info','hangup',
'videoquality', 'filmstrip', 'stats',
'tileview'
]}
};
api = new JitsiMeetExternalAPI(domain,options);
}
After researching a while, I finally figured it out
I made use of the window.open() in the current HTML script to open up new window and made use of document.ready(){} and loaded the script inside this function on loading the new window.
Voila!! It worked as per my requirement instead of calling the javascript on src i.e.,
<script src ="example.js"></script>
If you want to open a document/html in a new window and not tab on button click or link use the window.open() as shown below
Syntax
window.open(URL, name, specs, replace)
window.open("example.html","windowname","_blank","height=500,width=500");
This is what my function looks like now after modification
example.html
<html>
<head>
<title>Welcome to My HTML</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('#btnStart').on('click',function(){
window.open("example2.html","newWindow","_blank","height=500,width=500");
});
});
</script>
</head>
<body>
<div>
<button id='btnStart' class ="button">Launch New WIndow</button>
</div>
</body>
</html>
This is where the window.open() redirects to.
example2.html
<html>
<head>
<title>My page 2</title>
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//Printing log to check if DOM is loaded
$( document ).ready(function() {
console.log( "Ready" );
});
//Load your function/script to execute here
$(document).ready(function(){
//Your function goes here or the script you wanna run
});
</head>
</html>
Conclusion
This tutorial demonstrates on how to open a new window(not tab) on button click and execute a javascript function and or script on opening the window.
Regards
I'm calling a Google Apps Script webapp with a GET request by clicking a link to the webapp's Url, to initiate a function.
The browser automatically opens a tab with the return response.
How can I automatically close that tab immediately or after a few seconds of displaying a message.
I looked around and saw alot of suggestions to add a <script> tag, But it doesn't seem to work. Where am I going wrong?
Code.gs
function doGet(e) {
var pram = e.parameter.param;
// Run some code based off of the parameter
return HtmlService.createHtmlOutputFromFile('confirmation');
}
HTML file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function start(){
setTimeout(function(){ window.top.close(); }, 3000);
}
</script>
</head>
<body onload="start()">
<h2 style="text-align: center;">Your function is being Initiated<br>Please Wait...</h2>
</body>
</html>
The short answer is this cannot be done. please see #TheMaster's comment.
I need one of my website pages to instantly redirect to another upon loading. The refresh HTML command does not work, as it does not check whether or not a certain url is being loaded. Also javascript will work too.
You can wait for a load event with JavaScript and use one of either:
window.onload = function() {
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
}
or
window.onload = function() {
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
}
Source: How to redirect to another webpage?
Just add a meta tag in the head section of your HTML like this:
<html>
<head>
<meta http-equiv="refresh" content="0;url=http://redirect-to-this-page.com" />
<title></title>
</head>
<body></body>
</html>
I am working on a legacy app that has an iframe involved. The back button is working on the iframe and I need it to bypass the iframe and work on the parent window only.
Here is a dumbed down version of the issue and description of what I know.
the main page "index.html" has an iframe that is being added via javascript. It loads a.html, makes an ajax call that then does a window.location = "b.html" At this point if you use the back button it essentiallys makes the iframe go back to a.html and then redirects to b.html so you are effectively stuck on the page. If I remove the ajax call and do an window.location on load everything works ok. However given the architecture and what happen on the page I can't remove the Ajax call from the picture.
Here is the code I am looking at, let me know your thoughts on how to solve this issue. Also I should mention in Chrome 41 this isn't an issue, however the newer chrome 48 and 49 it is an issue. I tried history.replaceState but wasn't able to figure out a way to use it in this situation that made things work.
index.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>
<script>
$(function () {
var newIframe = document.createElement('iframe');
newIframe.src = "a.html";
newIframe.id = "A";
document.getElementById("iframeContainer").appendChild(newIframe);
});
</script>
</body>
</html>
a.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">
<script>
$(function(){
$.ajax({
url:"b.html",
complete:function(){
window.location="b.html";
}
});
});
</script>
</body>
</html>
b.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
$(function(){
})
</script>
</body>
</html>
This is only possible in HTML5 compatible browsers, and it would go something like this..
This goes in the child frame..
// catch the back button click.
window.onpopstate = function(event) {
// make the parent window go back
top.history.back();
};
This also only works if both frames are in teh same domain.
Scenario: You have a script that users can place on their website and when they click on it, it redirects to my website then calls a function only after they have successfully been redirected to my website and the function is part of my website, so there shouldn't be any problem with the same origin security policy.
So is the scenario possible?
EDIT
Ok now that I know that it can be done, I run into a pickle doing this.
function main(){
$(document).ready(function($){
window.location.href = 'http://www.example.com/michael';
theclient.chat();
});
}
I want theclient.chat() to be called after example.com/michael is loaded but it's not working.
UPDATE 2
function main(){
window.location.href = 'http://www.reflap.com/michaelnana';
$(document).ready(function(){
theclient.chat();
});
}
So will this work?
You have to call that function on your own site in the following block:
Source page:
function main(){
window.location.href = 'http://www.example.com/michael';
}
Target page (http://www.example.com/michael):
$(document).ready(function(){
theclient.chat();
});
To be clear: this will be called, if you type the URL of the page too and not only after a redirect.
You should add a URL parameter when you do the redirect, if you want to call it only after a redirect.
UPDATE:
You cannot call a function on the original page, after the redirect has been done.
On your target page, if you include the jQuery library, use this code:
$(document).ready(function(){
theclient.chat();
});
The ready() method makes sure the page (http://www.reflap.com/michaelnana) is rendered before running your JavaScript.
I've included 3 sample files that should serve as a skeleton for what you're trying to do.
www.external-site.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>3rd Party Page</title>
</head>
<body>
<script type="text/javascript"
src="http://www.example.com/michael/embed.js">
</script>
</body>
</html>
www.example.com/michael/embed.js
// load jQuery, keep it in our scope
// I'll not explain how this works but if you're making an embed
// script for other sites, you must make sure to encapsulate all
// your dependencies such as jQuery.
loadDependencies(function($) {
// document onload
$(function() {
// create a button that redirects to example.com/michael
var button = $('<a>').text('click me').click(function() {
window.location.href = 'http://www.example.com/micahel';
});
// insert that button after this script tag
var src = 'http://www.example.com/michael/embjed.js';
$('script[src="' + src + '"]').after(button);
});
});
www.example.com/michael/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Landing Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="theClient.js"></script>
<script type="text/javascript">
$(function() {
// all visitors to this page will trigger this call, not just
// the ones who came from the script embed. If you want to
// differentiate I'd recommened adding a query paremeter to
// the redirect and reading it there.
theClient.chat();
});
</script>
</head>
<body>
</body>
</html>