CODEWITHSUNDEEP
jquery
RaduS
RaduS

Reputation: 2555

Change the "href" and "src" attributes using jQuery based on condition

I have the following links:

<script src="/WebResource.php?d=FViz" type="text/javascript"></script>
<script src="WebResource.php?d=FViz" type="text/javascript"></script>

<img src="/Images/top.png">
<img src="Images/top.png">

<link href="/Skins/style.css" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

How do i insert in all of "src" and "href" attributes which belong to "script" "link" and "img" tags the "http://example.com/" at the beginning of the link if the link does not start with "http://" or "www.".

So in the end the final result should be like this

<script src="http://example.com/WebResource.php?d=FViz" type="text/javascript"></script>
<script src="http://example.com/WebResource.php?d=FViz" type="text/javascript"></script>

<img src="http://example.com/Images/top.png">
<img src="http://example.com/Images/top.png">

<link href="http://example.com/Skins/style.css" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

I must stress that it must be done using jQuery in the user browser after the page has been loaded and not on the server side.

Sorry that i do not have any base examples.

Upvotes: 0

Views: 750

Answers (2)

Ashish Saini
Ashish Saini

Reputation: 59

jQuery.each($("[src]"),function()
{
    if(($(this).attr("src").indexOf("http")>-1) || ($(this).attr("src").indexOf("www")>-1))
    { }
    else {
        $(this).attr('src',"http://www.example.com"+$(this).attr('src'));
    }
});

Upvotes: 0

jfriend00
jfriend00

Reputation: 707376

FYI, this type of URL fix-up is usually done server-side because the client does not have full control of this kind of stuff.

You cannot use client-side javascript/jQuery to modify existing <script> tags in your page. They will have already been parsed and loaded by the time you could try to modify them. You could insert new <script> tags with the appropriate src values if you needed to.

You can modify image src values with jQuery, but I'm wondering if there's a much better way to solve the issue you have.

If what you're really trying to do is to change the default path for relative URIs in your page, then you can use the <base> tag in the <head> section to change all the non-absolute URIs to use a different default path.

<base href="http://example.com">

Using jQuery, <img> src properties could be modified like this:

$(document).ready(function() {
    $("img").each(function() {
        // get raw .src attribute
        var src = this.getAttribute("src");
        if (src.slice(0, 7) !== "http://") {
            // make sure there's a leading "/"
            if (src.charAt(0) !== "/") {
                src = "/" + src;
            }
            // add domain
            src = "http://example.com" + src;
        }
        this.src = src;
    });
});

Since script tags have already been loaded (or attempted to be loaded) before you can get to them with your own script, the only thing you could do with the script tags is to create new script tags with the desired paths and then reinsert them. This likely creates loading order issues because the new script tags will load asynchronously.

Upvotes: 3

Related Questions