rename or replace all urls in html file per javascript - javascript

I have a jquerymobile web app and want to keep all existing hundreds of different external url links in the html file like
Link
but want to make them behave like this:
<a href="javascript:intel.xdk.device.launchExternal('http://www.example.com');">
How would I do that (without search and replace) with a script?
Thanks a lot for your help.

I suppose you want to add an event handler for all links, like this:
$(document).on('click', 'a', function() {
this.href = "javascript:intel.xdk.device.launchExternal('" + this.href + "');";
});
The job will be done only when the link is clicked.
Or, thanks to bencol:
$(document).on('click', 'a', function() {
javascript:intel.xdk.device.launchExternal(this.href);
return false;
});

If you can use jquery or jquery mobile, use this to replace all links
$(function() {
$("a").each(function() {
$(this).attr("href", "javascript:intel...('" + $(this).attr("href") +"')");
});
});

Related

How to select element tag from a varible url to jquery load() function

I just have a little question about syntax....
If I want to pass my url in a variable "test" But, I need to select only the data inside the html tag article... what can I do? this doesn't work:
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var test = $(this).attr('href');
$('.window').load(test).find("article"); //this does'nt work, please help
});
});
You can pass an optional jQuery selector to the load function (separated by a space from the URL) to load a page fragment.
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var test = $(this).attr('href');
$('.window').load(test + ' article');
});
});
You can find this feature in the jQuery .load() documentation

How do I get forwarded to a link that is in a data attribute in html when clicked using jQuery?

I am trying to forward to a link when the div is clicked using a data attribute and jQuery, but am stuck a bit. Here is the code I have:
html:
<div class="clickable-icon" data-link="www.google.com">click to be forwarded</div>
jquery:
$('.clickable-icon').attr('data-link');
used google as an example for the link to go to. But how would I use jquery to help with this?
you can do:
window.location.href = $('.clickable-icon').data('link');
and as you want on click, write click event and get clicked element data-link attribute value:
$('.clickable-icon').click(function () {
window.location.href = $(this).data('link');
})
WORKING FIDDLE
You could use window.location.href like
$('.clickable-icon').on('click', function() {
window.location.href = $(this).data('link');
});
$('.clickable-icon').click(function(){
window.location.href = 'http://'+$(this).data('link');
})

Grabbing an image from a page using jQuery

So basically what I want to do is grab links to images within a page and convert them to images. Right now, I have code that will grab any link within a post on the forums and converts them to images, but I want it more specific than that. I want to be able to grab images using the main 4 web image extensions (.jpg, .gif, .png, .bmp). I'm new to jQuery so I'd really love some help on this. Here's my code that I have so far:
(function($) {
if ($('#nav a[href*="/forum/3828932/"]').length && location.href.indexOf('/1/') !== -1) {
$('td.c_post:eq(0) a').each(function () {
link = $(this).attr('href');
$(this).html('<img src="' + link + '" alt="Icon" />')
});
}
})(jQuery);
You can try to use the ends-with selector to select anchor with href ends with those values
http://api.jquery.com/attribute-ends-with-selector/
and multiple selector
http://api.jquery.com/multiple-selector/
so your selector may look something like
$('td.c_post:eq(0) a[href$=".jpg"],td.c_post:eq(0) a[href$=".png"],td.c_post:eq(0) a[href$=".gif"],td.c_post:eq(0) a[href$=".bmp"]')

Getting all of links from page after load content with jquery load();

After load content to page using
div.load('page.php');
I need get all of links from page to change them. So I wrote this:
div.load('page.php', function() {
links = $('a');
alert(links.length);
for(i=0 ; i<links.length ; i++
{
link = $('a:nth-child('+(i+1)+')');
alert(link.attr('href'));
}
});
The result of this code is:
- first alert() returned correct links quantity, but it's not a DOM objects, so I can't change href attribute using it: links[i].attr('href', 'changed')
and I have to getting links in loop one by one, but this method returned only first link from page.php and all of links from site which will not changed.
Have someone any idea how do it?
You can do like:
div.load('page.php', function() {
$('a').each(function(index){
alert($(this).attr('href'));
});
});
You can change their href like:
div.load('page.php', function() {
$('a').each(function(index){
$(this).attr('href', 'whatever');
});
});
If you need to modify all the links only in the content that was loaded, use a context, like this:
div.load('page.php', function(data) {
$('a', data).attr('href', '#');
});
//or, if they're interdependently changed, something like this...
div.load('page.php', function(data) {
$('a', data).attr('href', function(i, href) {
return href + "?tracking=1"; //append ?tracking=1
});
});
This finds all <a>, but only inside the response that came back for page.php, so only the anchors that you just loaded. The format is $(selector, context), if you leave context off, it's document, so something like $('a') is really $(document).find('a'), giving it a context other than document, you're saying $(data).find('a'), getting only the links you want.

How to navigate href in anchor tag via JavaScript

Is there an easy way to have JavaScript mimic a User clicking an anchor tag on a page? That means the Referrer Url needs to be set. Just setting the document.location.href doesn't set the Referrer Url.
<script>
$(document).ready(function () {
$("a").click();
});
</script>
Go here
This doesn't work because there isn't a Click() event setup for the link.
You could do:
window.location = $("a").attr("href");
If you want to keep the referrer, you could do this:
var href = $('a').attr('href');
$('<form>').attr({action: href, method: 'GET'}).appendTo($('body')).submit();
It is hackish, but works in all browsers.
document.location.href = "#wanted_Location";
Maybe something like this is what you're looking for?
$(document).ready(function () {
$("a").each(function(){
if($(this).click()){
document.location.href = $(this).attr("href");
}
});
});
There is a simpler way to achieve it,
HTML
Bootstrap is life
JavaScript
// Simulating click after 3 seconds
setTimeout(function(){
document.getElementById('fooLinkID').click();
}, 3 * 1000);
Using plain javascript to simulate a click.
You can check working example here on jsFiddle.
Okay, referer doesn't get set using document.location (as per my other answer), might work with window.navigate(url)? If that doesn't work the following might, though it's quite - ehrm - ugly:
$(function() {
$("a").each(function(){
if($(this).click()){
$('<form method="get" action="' + $(this).attr("href") + '"></form>').appendTo("body").submit();
return false;
}
});
});

Categories

Resources