HTML JS Open new window with console in google chrome - javascript

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

Related

How to open multiple url-web-links via custom local .html?

Once upon a time I encountered a simple but efficent script that allows to paste copied links (line by line) into a box and then after pressing a button it opened all of the links (http://etc.etc) in a new tab.
Unfortunately I have deleted this gem.
Can you help me to make a simple local .html page where user could paste list of urls:
http://url.one
http://url.two
and after pressing a button it will open them url-s in a browser
thats what im looking for:
https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2014/07/urlopener.jpg
closest call is this;
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.java2s.com/")
window.open("http://www.java2s.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
instead of predefined URL-s user should be able to paste own links in form of list
To open a new tab, you would use the javascript command window.open(url,'_blank');, where the URL is a reference to the URL you'd like to open. Here's a refrence for window.open.
For your specific usecase, you'd want to create a HTML document with something like a <textarea> in it, and a submit button. You'd then take the text, split it into an array along newlines, (using String.split), then loop over the result and call the window.open function on each entry.
I hoped this helped!
Here is how to do it
document.getElementById("submit").addEventListener("click", function(){
var urls = document.getElementById("url").value.split(" ");
console.clear();
urls.forEach(function(element){
console.log(element)
window.open(element,'_blank');
});
});
<p>Insert your URl seperated by space </p>
<input type="text" id="url" value="https://www.google.se http://www.icefilms.info/" />
<input type="button" id="submit" value="open" />

Redirect to a SubDirectory via Form Input in JavaScript

When this project was first started we thought it would be super easy but after two days of failure, we are stumped.
Environment: MacBookPro - WordPress with Thrive Themes Architect
Goal: Create a simple form that allows visitors to input the name of a subdirectory into a form that instantly redirects them to that subdirectory upon clicking on the submit button.
Purpose: When a partner gives out their website URL which includes a subdirectory name sometimes the person fails to put in the subdirectory name and they go to the main site instead. This form would make it easy for them to get to the right place so that the right partner gets proper credit.
Theories: Could the redirect be being blocked by Browser security protocols or something? Is the coding off in some way? Is the method flawed?
Three of Many Failed Coding Attempts:
<script type="text/javascript">
function Redirect(){
var subDirectory= document.getElementById("sub_directory").value;
window.location.href= "https://www.thewatercoach.com/" + subDirectory;
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.
<script type="text/javascript">
function Redirect(){
var subDirectory= document.getElementById("sub_directory").value;
window.location.replace(subDirectory);
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.
<script type="text/javascript">
function Redirect(){
var subLink = document.getElementById("sub_Link");
var subDirectory= document.getElementById("sub_directory").value;
subLink.href = "https://www.theWaterCoach.com/" + subDirectory;
subLink.click();
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
<a id="sub_Link" href="https://www.theWaterCoach.com/">.</a>
Results: This Coding Example did work reliably with FireFox but not on Chrome or Safari. It does not work via Chrome on a PC either. For testing purposes, you can enter Becca into the text box.
Any ideas or solutions will be greatly appreciated!
The submit button is located inside a form tag. Therefore, when you click submit, the browser simply sends a GET request to your homepage. The Javascript code to redirect got executed, but then it is terminated right before the GET request is sent.
Solution: You have to prevent the form from being submitted. Find out how: read this stackoverflow question.

Open Google page in Javascript

I have the following code to open a google page and type "Hello" in the textbox.
The code opens the page but the textbox is empty.
Does anyone have an idea please ?
Thanks.
<html>
<head>
<script type="text/javascript">
function getValue()
{
var myWindow = window.open("http://www.google.com","_self")
myWindow.title = "Test"
var TextBox = myWindow.document.getElementsByName("lst-ib");
TextBox[0].value="Hello"
}
</script>
</head>
<body>
<form>
<input name="to" type="hidden" value="hoolah" />
<input type="button" onclick="getValue()" value="Get Value!" />
<form/>
</body>
</html>
You cannot:
Access the DOM of a page on a different origin
Access the DOM of a page from JavaScript that was running in the same window before you loaded the new page
What you want is impossible.
(If it was possible, it would be a security problem as your JavaScript would have access to personal data belonging to your visitors and stored on other websites.)
If I understand the question - you want to be able to pass a value to a Google search from your page. Rather than accessing the DOM of an external page - you are just trying to enter a value into the search term box on the google page.
All you have to do is append a query string to the Google url (such as "http://www.google.com?query=searchTerm" and it will pass the value to the search box on the google page.
I have slightly modified your code to show this - not how i would normally do it but I wanted to keep your code in place as much as possible so you can see whats going on.
I added a search term input and the onclick event opens the window and submits the query to Google. It could have been done as a form submit as well. Note that I put the JS at the bottom of the page - increases speed of page rendering - not important for this, but good practise movingforward. I also declared the variables together instead of using 2 'var's as well.
your code (slightly modified).
<html>
<head>
</head>
<body>
<form>
<input id="searchTerm" type="text" value="" placeholder="Search term"/>
<button type="button" onclick="getValue()">Search</button>
</form>
<script>
function getValue()
{
var term,myWindow;
term=document.getElementById('searchTerm').value;
myWindow = window.open("http://www.google.com?query="+term,"_self")
}
</script>
</body>
</html>

How to open a URL link from JavaScript inside a Google Apps Script HTML Google Site Gadget

I have written an HTML (not UI) gadget in Google Apps Script to be embedded in a Google Site. The gadget presents a drop-down with options that contain URL/display name value/text pairs.
I want to put a button in the gadget that opens a new window corresponding to the selected URL. But, basically, I get an "Object does not contain an 'open' method" error when I execute
window.open(url);
Is there a way around this? I can (and have) created gadgets with anchor tags that successfully open other windows, but doing this same action from javascript appears to not be allowed.
Anything that accomplishes the functionality is fine. A jQuery-based solution would be great.
Thanks.
Due to Caja’s sanitization, all the javascript functions are not supported that's why can't open a new window in App Script.
The workaround to display a popup in App Script is to use an overlay window(which is not a popup technically but appears like a popup) like jQuery modal dialog which are supported in App Script.
http://jqueryui.com/dialog/#modal-form
However iframe tags are not supported in App Script, so an attempt to open a url in modal window with the help of iframe tags will not work.
You can read more about these restriction in App Script from the link below :
https://developers.google.com/apps-script/guides/html/restrictions**
Hope it helps!
You can open the link directly by running the window.open() JS in a dialog using the HTMLService.
Here's a demo sheet (take a copy to see the script).
openNewWindow() is assigned to the button.
Code.gs:
function openNewWindow() {
var htmlString =
'<div>' +
'<input type="button" value="Close" onclick="google.script.host.close()" />' +
'</div>' +
'<script>window.open("http://www.google.com")</script>';
var htmlOutput = HtmlService
.createHtmlOutput(htmlString)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(60);
SpreadsheetApp
.getUi()
.showModalDialog(htmlOutput, 'Opening New Window...');
}
It's not possible to do that because of caja sanitization. The options bellow will not work.
1) jquery - $("#some_link_id").click()
2) javascript - window.open, window.href, etc...
The only workaround but I guess that will not fit to your problem is creating links with target="_blank" to open new windows but as I said is not possible to click in these links though javascript/jquery.
My Link
I was able to achieve this using a form. On submit, set the action of the form to the desired URL, as determined by the selected item in the select box.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('document').ready(function(){
$('#yourForm').attr('onsubmit',null); //set onsubmit to Null for NATIVE Caja sandboxmode
$('#yourForm').submit(function(){
var val = $('#yourSelect').val(); //get value of select box
$('#yourForm').attr('action',val); //set action of form
});
});
</script>
<div>
<select id="yourSelect">
<option value="https://www.google.com">Google</option>
<option value="https://www.bing.com">Bing</option>
</select>
<form id="yourForm" method="get" target="_blank" action="">
<input type="submit" value="Open Selected">
</form>
</div>

Find script that changed the value attribute of a <input /> tag

<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input type="button" name="test_button" value="test" />
</div>
</form>
<script>
document.getElementById("test_button").value = "changed_test"
</script>
Just as the HTML code above shows, I have defined a button with name test_button and value test and changing its value with the code in the script tag.
Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.
I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which are auto-executed made it nearly impossible to find the specific script manually.
Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea of how to find the specific <script> that changed the value?
Add some code like this to the document, right after the form with the button:
<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
set: function() { throw new Error('button value modified'); }
});
</script>
This will throw an error when anything tries to modify the button's value.
Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.
Here's a demo: http://jsfiddle.net/XSJZN/
Tested in Chrome 17.

Categories