So I have an interesting dilemma that I am trying to resolve. I am using FancyBox and when using it, it requires that loading an iframe has an href tag and a url set.
In the present form, a user selects a square, and then enters in an amount, and then clicks a button - which fires (opens) fancybox.
What I would like it to do is to modify the href url each step of the way.
For example, starting url is say:
http://www.domain.com/do.php
On the click of the square, it then becomes
http://www.domain.com/do.php?s=3
Then on entering an amount the url appends to be:
http://www.domain.com/do.php?s=3&amount=20
I've found some references to changing a url, but they all seem to be changing the url for browser history. So I am wondering if anyone could lead me in the right direction so that I can accomplish this?
Any insight is greatly appreciated. Thanks!
You can append to the URL by using the below method:
HTML
<input type="button" id="btnGo" onclick="getUrl()"/>
JavaScript
function getUrl() {
var currentUrl = window.location.href;
setUrl(currentUrl);
}
function setUrl(url) {
var result = url + "?anotherargument";
window.location.href = result;
}
If I understand your question correctly, you have to reload the url of an Iframe.
There is simple javascript-only solution for that. See example here: http://jsfiddle.net/ddan/2tf3vyLb/2/
Uploading src attribute of Iframe:
function appendToUrl(str){
document.getElementById('f1').src += str;
}
in your case the parameter first is ?s=3, second time &amount=20
You want to change the href of the iframe?
Have you tried simply setting it like so
$('#square').click(function(){
$('iframe').attr('href', $('iframe').attr('href') + '?s=3')
})
$('#amount_button').click(function(){
$('iframe').attr('href', $('iframe').attr('href') + '&amount=' + $('#amount').val())
})
Related
Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.
There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.
You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:
/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>
you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show
About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}
Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});
you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.
Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.
No; because it would make links extremely dangerous.
you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.
There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.
I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.
You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")
I want to share a data-uri image on pinterest.
I've come up with the following markup:
<a target="_blank" href="https://www.pinterest.com/pin/create/button/">
<img class="pin-image" src="data:image/png;base64,…">
</a>
At the end of my body I am including this JS:
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
></script>
Usually, the pinit.js should pick up the src of the img tag inside the link, but when I open up the link I don't see the image I want to share.
I've also tried to share without the pinit.js by adding GET parameters to the URL, but my data-uri is too long.
My researches haven't given me helpful advices on sharing generated images on pinterest, so hopefully on of you guys has an answer for me :-)
You can easily update the anchor tag with the proper URL and avoid loading of that pinit.js script..
The basic GET method does the trick...
I quickly wrote a function that will do that for you.
You just need to pass the img selector to it and it will find all occurrences and apply the logic.
DEMO:
https://jsfiddle.net/zmgyc0bd/
function pinterestShareFormatter(imgSelector) {
var imgs = document.querySelectorAll(imgSelector),
baseUrl = '//www.pinterest.com/pin/create/button/?';
[].forEach.call(imgs, function(img) {
var imgSrc = img.getAttribute('src'),
articleUrl = img.getAttribute('article-url') ? img.getAttribute('article-url') : window.location.href, // check if there is article url attribute and if not assign the current page url.
parentAnchorEl = img.parentNode;
// check if parent element is <a>
if(parentAnchorEl.tagName === 'A') {
// format the url params
var params = {
url: articleUrl,
media: imgSrc
},
paramsString = Object.keys(params).map(function(key){return key + '=' + encodeURIComponent(params[key]);}).join('&');
// update the anchor with formatted url
parentAnchorEl.setAttribute('href', baseUrl + paramsString);
}
});
}
pinterestShareFormatter('.pin-image');
make sure you are calling this function on a right place for you.
Im developing a webapp for Android and iPhone. I need the "share in facebook" functionality, and i know i can use the url "http://www.facebook.com/sharer/sharer.php?u=", appending the url to that to open the share in Facebook window we all know and love. Im trying to do it with JavaScript, but the url that is going to be shared must be appended dynamically...
I've tried so far:
function goP(){
var fname=${promo.urlPromocion};
window.location = "http://www.facebook.com/sharer/sharer.php?u="+${object.url};
}
With quotes, without quotes, with and without the + symbol between the facebook url and the url to share, even tried to hardcode an url. I don't know if the JS function is even called. But, it doesn't work. Here is the portion of gsp file where the function is called:
<div class="rrss" style= "width:60px; height:60px; float:left; margin-right:10px; margin-left:68px;" id="facebook"><img src="../images/img_mobile/1340130521_facebook.png"/></div>
Any help?
Thank you.
Change it to
window.location.href = ....
Try:
window.location.href = 'http://example.com';
window.location is actually an object that has a property called "href".
The following script can help you.
<script type="text/javascript">
function SubmitFrm() {
var Searchtxt = $("#<%= txtSearchBooks.ClientID%>").val();
window.location = "http://www.website.com/search?sUrl=" + Searchtxt;
}
</script>
For More Details
Click Here
I'm working on an extension that I need to find a way to catch the current focused link.
When we hit TAB Key, or mouse over a hyperlink, we can see in the status bar (right side of the address bar for firefox 4+) the URL of that link has been shown.
How do you capture this URL with Javascript in Add-on online builder? how do I store it into a variable and whenever the focused link is changed, the variable value will be updated accordingly? I searched internet for hours and so far found this function called Document.activeElement.href ?? But I'm not sure that's what I need and if it is, how do I use it?
Please help!
Thanks !!!
This should do the trick:
<html><body>
link 1
link 2
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
var handler = function() {
jQuery('#output').text( jQuery(this).attr('href') );
};
jQuery('a').focus(handler).mouseover(handler);
</script>
</body></html>
Let me know if you don't want to use jQuery, and I'll re-write my answer.
The variable window.XULBrowserWindow.overLink happens to contain the current hovered URL as shown in the status bar but it doesn't save the actual element being hovered.
http://jsfiddle.net/DmX5j/6/
var links = document.getElementsByTagName('a'),
linkDisplay = document.getElementById('currentLink'),
currentLink;
for(var i =0; i < links.length; i++){
links[i].onfocus = function(){updateLink(this.href)};
links[i].onmouseover = function(){updateLink(this.href)};
}
function updateLink(link){
currentLink = link;
linkDisplay.innerHTML = currentLink;
}
pure JS way. Not sure if this is what you are looking for or not, basically on focus or mouseover the current link is updated.
you will need to put event handlers on all links of the interest, this is quite easy using jQuery, when the event trigger you can capture the href attribute and process accordingly
Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.
There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.
You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:
/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>
you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show
About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}
Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});
you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.
Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.
No; because it would make links extremely dangerous.
you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.
There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.
I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.
You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")