I've been trying to create this chrome extension that you enter an address and click a button and it goes there. This may sound like a stupid idea but somehow a server block on a site is bypassed by chrome extensions. This is my current code:
<html>
<head>
<title>Website Opener</title>
<style type="text/css">
body
{
font-family: "Lucida Grande";
height: 100%;
}
</style>
<script>
$(document).ready(function() {
$('#url').change(function() {
var newurl = $('#url').val();
$('a.target').attr('href', newurl);
});
});
</script>
</head>
<body>
<form>
<input type="text" id='url' value='http://'>
<br>
<p><a class="target" href="">Go!</a></p>
</form>
</body>
</html>
What it currently does is just make the page blank or clear the input box instead of going to the new site.
I have tried javascript .open() method, this is trying jQuery. I'm mainly wondering if there are any other ways to do this or if I'm missing something.
This will help you:
Place jQuery to your <head> or in the end of your page, but before your code.
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
Then rewrite your code to use a keypress event:
$(document).ready(function() {
$('#url').keypress(function() {
$('.target').attr('href', this.value)
})
});
FYI: change event will happen when you changed a value of your input and set the focus out of it. So if you type an url and place your mouse cursor on the link and press it, change event will trigger AFTER your click. So be careful with those events.
UPDATE:
I just saw that you're doing an extension for GC.
The best practices tell us to divide application by layers' aim. HTML and JS should be separated.
In your manifest.json you have to add
"js": ["jquery.js", "content_script.js"]
and move your JavaScript logic from HTML file to the content_script.js.
Related
I'm trying to check if the input is empty with jQuery and the code doesn't work.
That's the code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
<form>
<input type="text" id="name">
<input type="submit" id="btnConnect">
</form>
</body>
</html>
$('#btnConnect').click(function()
{
if($('#name').val() == '')
{
alert('Input is empty!');
}
});
Your problem has two easy solutions.
Basically, you call your script before the rest of the page loads. Your script tries to attach to #btnConnect, which doesn't exist yet.
1). Use document.ready or window.onload. The script will only execute after the whole page loads, so it should work as you meant it to.
2). Place the JS files at the bottom of the document, right before the closing body tag. Most programmers chose to put the scripts at the bottom of the page, because if you have large scripts, the user sees a blank page untill they load.
It works quite well, because most of the time JS is not required until the user begins interacting with the site. It also enables progressive rendering.
For more good JS practices, check out:
JSTheRightWay.org
Hope this helps!
I think there is a problem with my JavaScript. It's basically not working, no matter anything i try.
I have this VERY simple script:
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here
And on this website it works:
http://www.javascripttoolbox.com/lib/popup/example.php
But when i add it to my own page:
<head>
<title>Script</title>
</head>
<body>
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here To Show DIV
</body>
It won't work. i've also tried with other javascript codes inside the tags, and they all worked exactly on the website where I took it from, and I don't know why it doesn't work now.
Does anyone know why it's behaving like this?
As stated, the onclick="" Popup function is not defined; your browser doesn't know what this function is supposed to do.
Edit as you need, but putting something like this in your header would define your function:
<script type="text/javascript">
function showDiv(div_id){
document.getElementById(div_id).style.visibility="visible";
}
function hideDiv(div_id){
document.getElementById(div_id).style.visibility="hidden";
}
</script>
Then you would call these functions in your onclick="" event with the needed parameters. Similar to the following:
Click Here To Hide DIV
Click Here To Show DIV
I am trying to entegrate 3D Secure payment logic with javascript.
As I post the credit card info to bank, I get a reply html.. This html redirects the screen to 3D Password screen of the bank which is
<html>
<head>
<title>MDpay default response template for web</title>
</head>
<body bgcolor="#02014E" OnLoad="OnLoadEvent();" >
<form name="downloadForm" action="https://katmai.est.com.tr/mdpayacs/pareq" method="POST">
<!-- Some Input Fields -->
</form>
<SCRIPT LANGUAGE="Javascript" >
function OnLoadEvent() {
document.downloadForm.submit();
}
</SCRIPT>
</body>
</html>
if we want to open this html in a pop up screen, OnLoadEvent does not get triggered with :
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.focus();
bu if this does work which is everything good. I call the onload function in body so i dont care what is the function to be called in OnLoad.
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.document.body.onload();
popup.focus()
BUT, we don't want to do this in popup, we dont want to open a new tab or page. We want to do this on same screen that we get the values from the user.. So I write the returning html to a div, but because there can be no 2 body tags in one html, the browser does not include the new body tag which includes OnLoad function name..
document.getElementById('vpos').innerHTML=data;
document.downloadForm.submit() // this is the code that works in OnLoad function.if a write that code statically of course it works, but this code logic can always change.
How will I solve this. Hope I am clear..
i need a javascript code that would enable me, on a certain button click to let a panel open which contains another page not under my domain for example, www.google.com!
Press Here and upon pressing it, a popup will appear or a panel will become visible that contains Google.com in it!
thanks!
In a function that you bind to the click event for the element you want to click on: Create an iframe and set its src, then append it to an element already in the document.
I'd look into using jquery http://docs.jquery.com/How_jQuery_Works
It's hosted on a CDN so it's easy to include in a document and many browsers will already have it cached decreasing the pages load time.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
jquery is a lightweight javascript library that makes selecting and manipulating page elements REALLY easy.
$("#button").click(function () {
$("#hiddenDiv").slideDown();
});
The hidden div should contain an iframe to display the off-domain page.
http://www.w3schools.com/html/html_iframe.asp
Oh and if you need to dynamically assign the iframe then look into the jquery append function http://api.jquery.com/append/
$('#hiddenDiv').append('<iframe src="http://www.google.co.uk"></iframe>');
This should put you on the right tracks.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_frameDiv').click(function(){
$('#frameDiv').show();
});
});
</script>
<style>
#frameDiv { display: none; }
#frameDiv iframe { width: 100%; height: 600px; }
</style>
</head>
<body>
Show external site
<div id="frameDiv">
<iframe src="http://www.bbc.co.uk">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
This will work only if the site you are trying to display allows frames. Otherwise you may need to open the site in a separate browser window.
use window.Open method like this:
window.open ("www.google.com","mywindow");
see
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
for more details.
I have this very simple Javascript to write on a text area when the link is clicked:
<head>
<script language="javascript" type="text/javascript">
function addtext(text) {document.form.textarea.value = document.form.textarea.value+= text;}
</script>
</head>
<body>
<form action="" method="" name="form">
<textarea name="textarea" rows="" cols="" wrap="wrap"></textarea>
</form>
q
</body>
Now I want to up the ante.
What I want to do is have the form in another another window, and that when I click the link, I writes to a textarea in another window.
I'm not necessarily asking for the code because I realize this might be quite complicated.
The question would be where to start, because I haven´t got a clue!!
(when I Google cross window or cross domain interaction with Javascript I don't really get anything useful).
So any help I can get, libraries, plugins or whatever might guide me in the right direction is more than appreciated.
Ok, I wrote you a sample you can check at http://jsfiddle.net/zzdAL/
$(document).ready(function()
{
popup = window.open("http://fiddle.jshell.net");
$("#input1").click(function() {
try {
popup.document.window.alert(1);
}
catch (e) { alert(e.message); }
});
}
);
It only runs an alert on the popup, but you can do whatever you want with the popup, assuming you have the necessary rights (needs to be the same domain I believe).
The most simple is to write a function in your popup and call it from the opener.
Probably it's too late, but here is an example of interaction: window interaction
Take a look to greasemonkey, it's an addon for your browser.
You can choose on which page(s) the script will works.
http://wiki.greasespot.net/Main_Page