I am making a chrome extension and I have multiple buttons which open different tabs. Unfortunately for some reason when I click the Seqta button it opens the tab 3 times and with the maths book it opens the tab twice. I'm not sure what is wrong but I have put the html and javascript below.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #263238;
width: 300px;
height: 500px;
}
</style>
</head>
<body>
<div id="buttons">
<div id="buttonDivSEQTA">
<button type="button" class="button" id="seqta" >Seqta</button>
<script src="popup.js"></script>
</div>
<div id="buttonDivMATH">
<button type="button" class="button" id="maths">Maths Textbook</button>
<script src="popup.js"></script>
</div>
<div id="buttonDivHASS">
<button type="button" class="button" id="hass">HASS Textbook</button>
<script src="popup.js"></script>
</div>
</div>
</body>
</html>
Javascript
var button = document.getElementById("seqta");
button.addEventListener("click", function(){
chrome.tabs.create({url:"https://learn.bcgs.wa.edu.au"});
});
var button = document.getElementById("maths");
button.addEventListener("click", function(){
chrome.tabs.create({url:"https://jacplus.com.au"});
});
var button = document.getElementById("hass");
button.addEventListener("click", function(){
chrome.tabs.create({url:"http://www.pearsonplaces.com.au/User_Login.aspx"});
});
It would be great if someone could help me out
You entered mutliple script calling, remove <script src="popup.js"></script> from the body and place it in right before .
As others say you have the script called three times.
You need to delete the two of them and move the call into the <head>-section with whatever is located there. It is the most common and also then you know exactly where your scripts are located and you doesn't have to search your entire page for the script.
For example:
<head>
<script src="popup.js"></script>
</head>
For reference:
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
W3Schools
For those who are interested there is an old discussion on where to put the jQuery/JavaScript scripts - read it here
Related
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
I'm using iframe to load lumextech.com as default src in a frame when i search and move to other webpage using lumextech.com But still in the iframe src its display lumextech.com only i wanted to capture url of page that has loaded in iframe...Notes: I don't have Control on lumextech.com....
My Code:
<! DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<section>
<h3> welcome to Iframe</h3>
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$url = $('#iframeContent').attr('src');
$('#demo').html($url);
});
});
</script>
<input type="submit" id="submit" value="showUrl"/>
<div id="demo"></div>
<iframe id="iframeContent" src="http://lumextech.com" style="min-height: 500px; min-width: 500px;"></iframe>
</section>
</body>
</html>
You had a typo in your src insert function. Extra white space in the string. Work good on this Codepen
$('#frameid').attr('src', 'http://lumextech.com/');
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
*Update: Ultimately I've decided that accomplishing exactly what I want here isn't possible due to the issues it poses to security. Kalle's answer below gives a solution that is closest to what I want to accomplish.
In order to solve my problem I've created scripts on both pages and will use a sort of push notification that is routed through the server in order for them to communicate.
Thanks for the help!! *
I have two pages. Both windows already exist independently. Page two has a function declared in JS.
I would like to be able to call the function in window two by clicking a link in window one.
Page 1:
<html>
<head>
<title>This is a title!</title>
</head>
<body style="background: lightblue">
Click Me!
</body>
Page 2:
<html>
<head>
<META HTTP-EQUIV="Window-target" CONTENT="my_target" />
<title>This is a title!</title>
<script type=text/javascript>
function clicked() {
alert('test');
}
</script>
</head>
<body style="background: lightblue">
</body>
Since it is on the same domain you can get this to work but would have to change the way you were doing it a little.
First off you would have to open it in a popup using this syntax rather than a new tab:
newwindow=window.open(url,'name','height=200,width=150');
and then you could simply call newwindow.clicked() after the popup is called.
update
just did a quick test and this will open it in a new tab. (sorry its been a while since I used the open function.
newwindow=window.open(url,'name');
Just noticed also that you should wait for the popup to load. So in my Example it would look a little something like this (with jQuery):
var newwindow = window.open('http://www.tylerbiscoe.com/vb/new.html');
$(newwindow).load(function(){
newwindow.clicked();
});
Ok, brand new answer. I hope this is what you were thinking. This is however, when you open page 2 from page 1.. So basically, page 1 would know who page 2 is..
Online example: http://kopli.pri.ee/stackoverflow/6832271.php
Page 1
<html>
<head>
<title>Page 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.ajaxlink {color: blue; cursor: pointer; border-bottom: 1px dotted blue;}
</style>
</head>
<body>
<span id="open_page_2" class="ajaxlink">Open new window</span>
<br>
<br>
Click Me!
<script>
$('#open_page_2').click(function(){
child = window.open('test2.php','page_2','width=600,height=600');
});
$('a[target=my_target]').click(function () {
child.SecondPageFunction();
return false;
});
</script>
</body>
</html>
Page 2
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Your seeing page 2!</h1>
<script>
function SecondPageFunction () {
alert('Second page action got triggered!');
}
</script>
</body>
</html>
The script must be a part of the page you're opening in the new window. You're absolutely correct about it being a security flaw if it was elsewise allowed.
You could add some query string argument that could be picked up onload by javascript in the page you are opening and call your function if the query string arg is present.