I am a beginner building a Chrome extension. I have an issue using the function described in the Chrome extension developer doc to make a button to create a new tab in "popup.html". It doesn't work no matter which methods I have tried from Stack Overflow.
My code is as follows:
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
function showIndex(){
var index_url="/index.html",
chrome.tabs.create({
url: index_url
}),
}
</script>
<body>
<button value="tab" style="width:100px; height:100px;" onclick="showIndex();">Go to Index</button>
</body>
or
function createTab() {
chrome.tabs.create({url: "/index.html"});
}
Go to Index
Neither option seems to work.
So I wonder whether this function should be placed in background.js? If not, please tell me what's wrong with this code. Thanks in advance!
BTW I changed the URL to www.stackoverflow.com. It is still the same---not working.
It looks like you spelled create wrong in your HTML.
Your issue is probably that Chrome does not allow you to use "unsafe" code in extensions. See the documentation here. You cannot have javascript in your html. You have to subscribe to the event handler on the DOM element.
<html>
<head>
<title>Facebook Connect For Chrome Extension</title>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="popup.js"></script>
<body>
<button id="index" value="tab" style="width:100px; height:100px;">Go to Index</button>
<script type="text/javascript" src="indexStuff.js"></script>
</body>
</html>
You then need a new indexStuff.js file with this
function showIndex() {
var index_url = "/index.html";
chrome.tabs.create({
url: index_url
});
}
document.getElementById('index').addEventListener("click", showIndex);
Note, the script tag could be moved to the top if you add an event handler to check when the DOM is loaded.
function showIndex(){
var index_url="/index.html",//why are you using "," instead of ";"?
chrome.tabs.create({
url: index_url
}), //why are you using "," instead of ";"?
}
why are you using "," at the end of line, instead of ";"?
You can use window.open(url, title, options) to open a popup window via JavaScript.
options is a string containing one or more of these variables (or empty):
width width of the window
height height of the window
location URL visible or not
status statusbar visible or not
menubar menubar visible or not
directories I'm guessing this is the bookmark bar
toolbar toolbar (back, home, etc.) visible or not
resizable whether or not resizable
scrollbars whether or not to enable scrollbars
e.g.:
window.open('http://website.com/popup.html', 'Popup Window', 'width=640,height=480,location=yes,scrollbars=yes');
Related
I am trying to open a separate window (as an underlying window) of the current window. I have attached a simple code segment which I used. But in Chrome there is a popup blocked message appeared when I do this. It means that The separate window is not recognized as a window, it still considered as a popup. How can I do this ? Any suggestions would be really appreciated
<html>
<head>
<title>JS Window example</title>
</head>
<script type="text/javascript">
function windowonload()
{
window.open("http://yahoo.com", "sameera", "height=200,width=200");
}
</script>
<body onload="javascript: windowonload()">
<h1>JS Window example</h1>
</body>
</html>
you can use iframe tag like this wherever you want to show the window
<iframe src="http://yahoo.com"></iframe>
In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.
I allow the user to store a domain in local storage (e.g. http://192.168.1.104). My method of pulling the domain out of local storage is like this:
<script type="text/javascript">
domain = localStorage['domain'];
function DOMAIN(dive) {
window.location=domain+dive;
}
</script>
and I can open it like this:
CLICK HERE
or
CLICK HERE
but I can't seem to get it to allow opening in a new tab (chrome v13). It's driving me nuts, any suggestions?
Try this:
CLICK HERE
Lets see if this works for you:
CLICK HERE
Okay, I figured it out, but it's a little hacky and restless. Make a dummy html document, say /html/home.html for instance. Call the js-function inside the dummy doc:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Ripping Status</title>
<script type="text/javascript">
domain = localStorage['domain'] || '';
function init() {
window.location=domain+'/';
document.getElementById( 'box' );
};
</script>
</head>
<body onload="init();">
<div id="box"></div>
</body>
</html>
where 'domain' is stored as, say, http://192.168.1.101. Now, call /html/home.html inside the main html document via
CLICK HERE
and it allows right click > open new tab, window, etc as you would expect.
When you execute following example using Firefox 3:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(document.getElementsByTagName("html")[0].innerHTML);
w.document.close();
reportLinks(w.document.links);
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
You will see that both the number of links shown when clicking on 'Show Links Report' as when clicking on 'Open Same Content and Show Links Report' will be 2. However when having an external JavaScript file reference from this page the behavior seems different (just make an empty file some.js if you want). When clicking 'Open Same Content and Show Links Report' the number of links will be 0.
<html>
<head>
<script language="javascript" type="text/javascript" src="some.js"></script>
<script language="javascript" type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(document.getElementsByTagName("html")[0].innerHTML);
w.document.close();
reportLinks(w.document.links);
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
It is probably a matter of loading the page and the moment that reportLinks executed exactly. I assume that the external some.js is added that the document is not completely build up. Is there a way that I can register this reportLinks call for onload event so that I can be sure that document.links is complete?
By the way the example works fine in both cases with Google Chrome.
(added after answer1)
As suggested by Marcel K. I rewrote the example, added also the code the way I really would like to have the thing going. And now testing it, and this simple example seems to work with Firefox and with Chrome.
<html>
<head>
<script type="text/javascript" src="some.js"></script>
<script type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
document.getElementsByTagName("html")[0].innerHTML+'\n</html>');
w.onload=function(){
reportLinks(w.document.links);
};
w.document.close();
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
I had hoped with this simple example to show a simple case of the actual code I am writing. A print preview screen of complicated html in which I want to disable all hrefs once opened. But in that one the onload handler is never called... How can I register an onload handler in this case in the most robust way?
Many thanks,
Marcel
As I said in a comment, this is a very strange issue. But I think it happens because the inclusion of an external script causes a delay in page rendering (of the new page) and its DOM might not be ready to inspect.
My suspicion is supported by the fact that adding the (new) defer attribute seems to solve this issue:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
The defer attribute can be set on the original page, as you want an exact copy of it. You can set it if it doesn't matter where a script is being included (e.g., when using document.write in your included file it does matter at which place you include it).
As defer is a Boolean attribute, it is activated when it is simply present (defer) or (when using XHTML) set to itself (defer="defer"). In your case, the script inclusion would read:
<script type="text/javascript" src="some.js" defer></script>
Update regarding your update: you should still insert a Doctype in the main page (consider using the HTML 5 one).
And I think the way you attached your onload event is the best you can do.
But considering the goal you want to achieve (a print preview without hyperlinks): you can also use the "print" media attribute and style hyperlinks like text; that's way more easy than the thing you are doing and it works when JavaScript is disabled.
The only way I could make the example above work portable over Firefox, Chrome and IE is by registering the onload listener through inlined JavaScript in the HTML loaded in the popup window. Following example code shows how.
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
This page uses a script in script.js file. Following shows the content of that file.
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
document.getElementsByTagName("html")[0].innerHTML+
'\n <script type="text/javascript">\n'+
' function addOnloadListener(listener){\n'+
' if (window.addEventListener) {\n'+
' window.addEventListener("load", listener, false);\n'+
' } else {\n'+
' window.attachEvent("onload",listener);\n'+
' }\n'+
' }\n'+
' addOnloadListener(function(){reportLinks(document.links);});\n'+
' </script>\n'+
'</html>');
w.document.close();
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
When putting the function addOnloadListener directly in the JavaScript file (not inlined in the page) it doesn't work in IE6 because, I believe, it cannot handle the order of script entries correctly. When addOnloadListener was not inlined the inlined call to addOnloadListener didn't work, it simply couldn't find the function in the earlier:
<script type="text/javascript" src="script.js"></script>
The code is only a simple example that doesn't really do a lot. I used it for disabling all links in a print preview popup page.
A simpler way to register an onload listener for a popup window portable over browser is always welcome.
Thanks,
Marcel
I have an HTML page that opens another page via JavaScript. When a user clicks a button in the other page, I want to post a message in a DIV of the opening page via JQuery. I cannot put my finger on it, but I cannot seem to get this to work. Here is my opener page
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="window.open('dialog.html', '_blank', 'height=200, width=300');" value="launch!" />
<div id="testDiv"></div>
</body>
</html>
When the user clicks the "launch!" button, a dialog will appear. The code for the dialog looks like this:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="updateOpener()" value="Update Opener" />
<script type="text/javascript">
function updateOpener()
{
var testDiv = window.opener.jQuery("#testDiv");
if (testDiv != null) {
alert("here");
testDiv.html("Updated!");
}
}
</script>
</body>
</html>
Surprisingly, the alert box appears. However, I cannot seem to update the HTML of the DIV in my opening page. Does anyone know how to do this?
You're referencing "confirmDiv". Where is that DIV?
You can't do that if the parent page (the opener) resides on another domain. Otherwise, your code works perfectly.
Also, your != null check is probably not doing what you think it is doing, as the jQuery function never returns null. If you are checking for the existence of an element, you need to do it this way...
var el = $("#myElementId");
if(el.length == 0)
alert('Not found!');
Ummm, it works for me in Firefox 3.0.11, IE8 and Chrome 2... (I.e. the dialog.html button updates the HTML in the opener page to say 'Updated!'.)
Oddly, your example works fine for me in Chrome, IE 8 and FireFox. Do you have any other details?