I have a button defined in HTML.
I want to load a page background.html when this button is clicked. But I want to do it from javascript, not from inside the .html file. So on my register.js file I have below:
$(document).ready(function() {
$("#btnApply").click(function() {
window.open("background.html");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnApply" value="Register">
But this doesn't load the page. What am I missing?
<input type = "button" id = "btnApply" value = "Register" onclick="loadPage()">
then the function could be in your register.js file as :
function loadPage()
{
window.location="background.html";
}
It might be because popups are blocked on that page. All you need is to allow them (a screenshot from Chrome):
And ensure that you:
Run this code in the browser (otherwise you will not have window object)
background.html is in the same folder as your script
The open() method opens a new browser window. If you want it to load from the same window use location object.
window.location.assign("background.html");
Related
This is client-side HTML. I'm just using HTML for automation.
My initial goal was to open a new window https://live.ipms247.com/login/ and then paste the values in the three login fields. All three fields have ID tags. And I can write to them from the console. For example.
document.getElementById("username").value="sample";
document.getElementById("hotelcode").value="12345";
document.getElementById("password").value="Password";
I wrote a code to copy text from parent window to child window at the click of a button.
My code is on a local file.
<html>
<head>
<script type="text/javascript">
function init()
{
popupWin = window.open('https://live.ipms247.com/login/','popupWin','');
}
function transferText()
{
popupText = popupWin.document.getElementById("username");
parentText = document.getElementById("parentTextBox");
popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox" onkeyup="transferText();" value="Hello World">
<input type="button" onclick="init();" value="popup window">
<input type="button" onclick="transferText();" value="Transfer Text">
</body>
</html>
However, this does not work, apparently because my code is on a local file and the website is on another domain.
So my only solution to this problem, so far, is to launch the site with onlick and then focus to it. Press Ctrl+Shift+J to open the console and then paste the commands (I have code which copies them to clipboard) and hit enter.
Is there any possibility to launch the new window with the console open and focus on the console?
You can not do this because JavaScript restricts you to the user.
If you want to reach your goal, you can use the frames API
Can't seem to find anyone to figure this out. Just trying to get <iframe> BTN to talk to parent.
Simple problem, need to get a button inside an <iframe> to call function on main.html.
The setup is as follows:
main.html has <iframe> with products.php inside.
Products.php has button that loads confirmation.php
Confirmation.php has the BUTTON we need to call function on parent.
all files are on the same server/domain
The traditional method of button inside products.php changing src on main to confirmation.php works as expected.
The problem is happening here: On products.php the way it loads the confirmation page is with this:
private $base_url = "https://xxxxxxxx.com/";
$returnURL = $this->base_url . "confirmation.php";
Products page <form> submission calls this PHP. This action is somehow embedding the confirmation page, or appending it in a way it can't communicate with parent.
Button & function on confirmation.php:
<button type="button" onClick="test()">BACK</button>
<script>
function test() {
parent.mainTest();
}
</script>
All of the below have been tested in confirmation page func and failed.
parent.mainTest();
window.parent.mainTest();
document.parent.mainTest();
parent.document.getElementById('iframe1_id').src = "iframeTest.php";
window.parent.frames["iframe1"]
Script on main.html:
<script>
function test (){
alert("Worked");
}
</script>
<iframe src="products.php" id="iframe1_id" name="iframe1"></iframe>
I have the following example files:
index.html
<body>
<input type="file" name="image" onchange="handleUpload()">
<script>
function handleUpload() {
window.location = 'aa.html';
}
</script>
</body>
aa.html
<body>
success
</body>
After file upload I'm redirected to another page.
When I hit browser back button I get Uncaught ReferenceError: handleUpload is not defined at HTMLInputElement.onchange.
Can someone explain why is this happening? I understand why handleUpload is triggered but why it's undefined?
Update
My app is more complex. I use webpack to bundle my js files into a single file then I reference it in layout before closing body tag.
What i'm trying to do is a image preview when input file is filled. Everything works great but if I hit back button after the form was submitted I get that error.
I manage to avoid this problem by removing onchange from html and added a event listener in one of js file. This approach has a delay on opening the select file window.
Here is your Answer
<input type="file" name="image" onchange="window.location='aa.html'">
I have popup.html I want to load different html page in extension when user click href. Example user will enter username and password and if they are correct login.html redirect to content.
Tried this:
window.onload=function(){
$( '#Login' ).click(function() {
alert('test');
chrome.browserAction.setPopup({
popup:"login.html"
});
});
}
Login is a button.But login.html didnt show up. Alert is working.
To change the popup html page you can use
chrome.browserAction.setPopup
more detailes on this page http://developer.chrome.com/extensions/browserAction.html
you can do something like this:
in html:
<a onclick="changePopup();" href="#"> change popup</a>
in js:
function changePopup(){
chrome.browserAction.setPopup({
popup:"second_page.html"
});
}
You didn't specified where is the link placed? in the popup page or in an html page, so I assumed the linked is placed in popup html page.
If the link is placed outside extension, you should use Content Scripts https://developer.chrome.com/extensions/content_scripts.html
UPDATE: You should put the java-script file in your manifest.json using background pages or event pages depending on what you need.
Here you can find more info:
https://developer.chrome.com/extensions/background_pages.html
http://developer.chrome.com/extensions/event_pages.html
....
"background": {
"scripts": ["background.js"]
},
....
If you loaded the javscript file from your html page using the <script> tag , you should use the Message passing api : http://developer.chrome.com/extensions/messaging.html to interact with your html.
Try this
<button id="add-button">Go to another popup</button>
How to call a javascript function in ifram from parent window.
i have a jsp page which contains an iframe.
jsp page is served by "a.yenama.net" server and iframe is served "b.yenama.net" server.
<iframe width="1200" height="640" name="data" id="dataId" >
</iframe>
<br/>
<input type="button" name="data" value="Save data" onclick="callSaveData();" />
tried below code from parent jsp page and recieved permission denied error in IE
window.frames['data'].callData();
also tried
document.getElementById('dataId').contentWindow.callData(); //didn't work
Function in iframe
window.callData = function(){
alert('Iframe function');
}
your help is truly appreciated.
you can do that by declaring your function in a common .js file
Therefore, you can access your function from wherever you want.
Have a nice day
i would suggest you to use jquery.load method instead of iframe to load your second page in a div of first page and then you can call any methods from both the pages
$('#result').load('PageWhichYouAreOpeningInIFrame.html');
or if you still wants to go with IFrame then you can use:
Invoking JavaScript code in an iframe from the parent page
http://api.jquery.com/load/