We Keep Coding

Switch focus to new browser tab once it is opened

I the below script, once the button is pressed, a new browser tab with Google is opened. I then want to fill the search box on this newly opened tab.
How do I switch focus to this new tab, so that I can wait for it to load completely and then fill the search box?
<button id="start">Google</button>
<script>
function open_google_in_new_tab() {
var url = "https://www.google.com";
window.open(url);
window.onload(fill_search_box()); // here it will try to operate on the old tab
};
function fill_search_box() {
var search_box = document.getElementsByName("q")[0];
search_box.value = "Some text";
};
var start_button = document.getElementById("start");
start_button.addEventListener("click", open_google_in_new_tab);
</script>

You can't exactly target another element in another document from your script, however, you can set the textbox value of the Google textbox using a query string:
www.google.com?q=SearchTerm
When creating the SearchTerm you should also use encodeURI to ensure that your attached search query meets URL standards
Also, if you wish to open the window in another tag you can use window.open(url, "_blank") to open.
See example below:
Note:- The page will not open due to snippet restrictions - so run in your own browser.
<button id="start">Google</button>
<script>
function open_google_in_new_tab() {
var text = "Some text";
var url = "https://www.google.com?q=" + encodeURI(text);
console.log(url)
window.open(url, '_blank');
};
var start_button = document.getElementById("start");
start_button.addEventListener("click", open_google_in_new_tab);
</script>

You cannot do that with Javascript unfortunately.
However, this might make you achieve something similar if you are willing to try.
You can manipulate the search string via parameter named "q" in the query string of the Google website. So, in order to make the user to go the Google and search this particular word, you attach the keyword to it. Something like this:
var url = "https://www.google.com?q=searchKeyword";

Javascript/Jquery window.location

I have page the has some data in tabs, Im trying to write a function so that when links are click from another page can load the page with the tabs on and show the correct tab. This is working with the code below, minus the actual changing tabs function. But for some reason using the window.location..... as a variable still scroll the page down to the matching id. Is there another way to get the string in the url after the #. Or can i do it this way but not have to jump to the id? thanks
function loadTab(){
var linkToTab = window.location.hash.substr(1);
var linkClass = '.'+linkToTab
if(window.location.hash != '') {
changeTabs(linkClass);
}else{
$('.companyLink:first').addClass('active');
$('.companyBio:first').addClass('active');
$('.companyBio:first').fadeIn();
};
}

The hash character is for anchors.
Use a question mark instead of a hash.
<a href="index.html?tabname">
and
var linkToTab = window.location.search.substr(1);
var linkClass = '.'+linkToTab
if(window.location.search != '') {

The # part of the URL is traditionally used for anchors. The 'jumping' you see is the original feature.
Modern websites and web-applications use it build a history as HTML5's history feature isn't widely supported yet.
To avoid the jumping add event.preventDefault to your links, like:
Tab1
<script type="text/javascript">
document.getElementById("tab1handle").onclick = function (event) {
event.preventDefault();
}
</script>
You can also make sure the anchor is not defined. In this case the browser will jump to the top of the page. It's up to you whether this is undesirable or not.

Embed a webpage and run a javascript file on it

I am basically trying to show end users a demonstration of how their webpage will look after they use my service[This would be a javascript file to run on their webpage.]
I have tried the following:
Used iframe to embed the webpage - The problem here is that i cant access the iframe content and run my js functions on them.
used jquery load(), html embed, and object but the same problem persists. i am unable to run my javascript on the embedded webpage.
Basically what i want to do can be seen here http://www.luminate.com/publisher/ . Just type in a website URL in the Preview Luminate section and see what happens. The page loads in a new tab and they have loaded a javascript on pageload.
Can someone suggest any way to do this or what these guys have done[ http://www.luminate.com/publisher/ ]?

here is the script which they used to call the page
<script type="text/javascript">
function pop_demo(event) {
event.preventDefault();
var url = $("#preview-site-url").val();
if (!url) {
alert("Please enter a URL to preview.");
return false;
}
if (!/^(http|https):\/\//.test(url)) {
url = "http://" + url;
}
url = "/publisher/demo/?url=" + encodeURIComponent(url);
window.open(url, "");
}
Here your calling url : "/publisher/demo/?url
and internally it get load frame and pass the result to next page.

Bookmarklet target page DOM traversal. How?

How do I make a bookmarklet that places something into a field and submits the form?
I think along these lines:
1)var p = document.open(http://site.com/form.htm)
2) var h = p.innerHTML
3) var f = h.getElementById('formfield')
now how do I get the URL of the current page to become the value for 'formfield'?

var p = document.open(http://site.com/form.htm)
This won't work. You may be thinking of window.open. If you use window.open, it will only be useful for your purposes if the bookmarklet is run from the same domain. If run from any other domain, it will open the window, but you won't be able to do anything else with the document in that newly opened window.
var h = p.innerHTML
This does nothing helpful in your case. It just returns a string of text.
var f = h.getElementById('formfield')
This is not correct because it uses "h", which isn't correct. What you probably want is this...
var w = window.open('http://site.com/form.htm');
// need code that will check if window is done loading before you use next line!
w.document.getElementById('formfield').value = window.location;
If you use the bookmarklet on the page with the form, you only need this:
document.getElementById('formfield').value = window.location;
If you want to open the window to another domain, enter a form value, and submit the form - This can not be done with a bookmarklet. A bookmarklet faces the same restrictions as any other javascript in a page. This is for security to prevent any web page on the internet from trying to take control of your browser and do things on other sites as you. Your only reasonable option in this case would be to create/use a browser addon/extension.

If you are looking to put the current page's URL into formfield, this is how it could be accomplished:
f.value = window.location;

If I understand correctly, you want to submit the current URL and maybe some other data to your server using a bookmarklet.
I would do it this way:
Append your form to the current DOM using JavaScript. The form should be hardcoded in the bookmarklet.
Populate the form, you are on the guest page now, same domain.
Submit the form, maybe using a target="_blank" for the result.
You can't use Ajax instead of a form to submit your data because of crossdomain restrictions.

Loading a javascript into HEAD by its chrome url

I am developing a custom plugin for Firefox. For one of the functions in this plugin I have a button which when clicked has to toggle hide/show for another div element. This is achieved by the means of a Javascript function. The function itself is in a file that is packaged in the plugin as well.
Since the div elements are on the browser page I am trying to get the Javascript for this function loaded into the HEAD of the page by using its chrome URL. However, it is not giving the desired result.
Below are snippets of the relevant code:
The actual Javascript that performs the toggle action. The chrome URL for this is: chrome://firefox_extension/content/togglerowz.js If I put this URL in the browser it is able to display the code below.
function toggle(doc) {
var resultBlock = doc.getElementById("RowzFFExtensionDynamicContainer");
var toggleButton = doc.getElementById("RowzFFToggle");
if (resultBlock.style.display == "block") {
resultBlock.style.display = "none";
toggleButton.value = "Maximize";
} else {
resultBlock.style.display = "block";
toggleButton.value = "Minimize";
}
}
Another Javascript that loads this into the browser HEAD. This is triggered by a window load event.
var doc = aEvent.originalTarget;
var togglerowzscript = doc.createElement("script");
togglerowzscript.type = "application/javascript";
togglerowzscript.src = "chrome://firefox_extension/content/togglerowz.js";
var headvar = doc.getElementsByTagName("head")[0];
headvar.appendChild(togglerowzscript);
When the page loads, the following contents are in the HEAD element of the page (as viewed in Firebug):
<script type="application/javascript" src="chrome://firefox_extension/content/togglerowz.js">
Filtered chrome url chrome://firefox_extension/content/togglerowz.js
</script>
When I click the button the error console says toggle is not defined.

Did you whitelist the relevant chrome package as allowing untrusted content to load parts of it? The default setting is to not allow that for various security and privacy reasons. See https://developer.mozilla.org/en/chrome_registration#contentaccessible