북마클릿을 사용하여 이미지의 전체 경로를 얻으십시오.

Question

웹 페이지의 이미지를 클릭 할 때 이미지의 전체 경로를 제공하는 책갈피 릿 작업을하고 있습니다. 그런 다음 이미지가 서버에 다운로드되고 우리는 비즈니스 데이터를 처리합니다.

현재 스크립트는 jQuery를 사용하여 src 속성을 구문 분석 한 다음 일반적으로 작동하는 다소 바보 같은 논리를 가지고 있지만 실제로는 그렇지 않습니다.

이제 정규 표현식을 사용하여 URL을 구문 분석하는 작업을 더 잘 수행 할 수있는 추한 코드를 작성할 수 있지만이 작업을 수행하는 데 더 좋은 방법이 필요하다고 생각합니다. 파이어 폭스) "마우스 오른쪽 버튼 클릭 => 이미지 위치 복사"가 환상적입니다.

여기에 내가 현재 가지고있는 관련 js 코드가 있습니다. (버그는 있지만 일반적으로 작동합니다.) 더 좋은 방법에 대한 혁신적인 아이디어가 있습니까?

var imgsrc; 
$("img").click(function() { 
    imgsrc = $(this).attr("src"); 
    var url = document.URL; 

    if (window.location.pathname != "/") { 
    var pathLoc = url.indexOf(window.location.pathname); 
    url = url.substr(0, pathLoc + 1); 
    } else if (window.location.pathname.substr(0,1) == "/") { 
    url = url.substr(0, url.length - 1); 
    } 

    if (imgsrc.toLowerCase().indexOf("http://") != 0) { 
    imgsrc = url + imgsrc; 
    } 

    window.open("http://www.mycompany.com/whatever?imgsrc=" + imgsrc + ""); 
}); 

$("img").hover(function() { 
    $(this).css({'border' : '4px solid #ff0000'}); 
    }, function() {$(this).css({'border' : ''}); 
}); 

Answer 1

나는 대부분의 브라우저는 SRC 특성 (필자는 DOM 속성,하지 getAttribute('src')을 의미)을 정상화 생각합니다. 그래서 당신은 시도 할 수 :

$("img").click(function() { 
    window.open("http://www.mycompany.com/whatever?imgsrc=" + this.src + ""); 
}); 

을 그 다음 나는 앵커 태그가 HREF 속성을 정규화가 있다는 사실을 알고 작동하지 않는 경우; 이것은 확실히 작동 할 것입니다 :

$("img").click(function() { 
    var fullSrc = $('<a/>').attr('href', this.src)[0].href; 
    window.open("http://www.mycompany.com/whatever?imgsrc=" + fullSrc + ""); 
}); 

Answer 2

메뉴를 상황에 맞는 메뉴에 추가하려면 firefox 확장을 만들어야합니다. 위키 피 디아 here에 대한 확장 프로그램을 만들었습니다. 코드에 관심이있을 것입니다.