Google 리더에서 북마크 릿을 사용하여 방문중인 페이지를 "메모"할 수 있습니다. 북마크 릿을 누르면 현재 페이지 상단에 작은 Google 양식이 표시됩니다. 양식에 설명 등을 입력 할 수 있습니다. 제출을 누르면 양식이 페이지를 떠나지 않고 양식을 제출 한 다음 양식이 사라집니다. 전체적으로 매우 부드러운 경험.북마크릿을 사용하여 사이트의 페이지에 양식을 표시하는 방법 (Google 리더에서 노트처럼)?
나는 그것이 어떻게 끝 났는지에 관해 명확히하려고 노력했다. 그러나 가장 흥미있는 부품은 minified하고, 읽을 수 없다. 그래서 ...
(브라우저 측에서) 이와 같이 구현하는 방법에 대한 아이디어가 있습니까? 어떤 문제가 있습니까? 이것을 설명하는 기존 블로그 게시물은 무엇입니까?
오파 조가 맞습니다. 그러나 나는 우리 사이트 (www.iminta.com)에서 작업 한 북마크릿 프레임 워크를 가리킬 것이다. 다음과 같이
는 북마크 자체가 읽
javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())
을이 그냥이 파일을 포함하는 문서에 새 스크립트를 주입 :
http://www.iminta.com/javascripts/new_bookmarklet.js
은 북마크가를 생성하는주의하는 것이 중요합니다 iframe을 배치하고 위치를 지정하고 문서에 이벤트를 추가하여 사용자가 히트 이스케이프 (창 닫기) 또는 스크롤 (볼 수 있도록 유지)과 같은 작업을 수행 할 수 있도록합니다. 또한 z-positioning (플래시)과 잘 맞지 않는 요소를 숨 깁니다. 마지막으로 iframe 내에서 실행되는 javascript와의 통신을 용이하게합니다.이 방법으로 부모 문서에 iframe을 제거하도록 지시하는 닫기 버튼을 iframe에 넣을 수 있습니다. 이런 종류의 교차 도메인 콘텐츠는 약간 해킹되지만,이를 수행하는 유일한 방법입니다.
마음이 아프지 않기 때문에; JavaScript가 좋지 않은 경우 어려움을 겪을 준비를하십시오.
매우 기본적인 수준에서는 페이지에 삽입 할 요소를 만들기 위해 createElement을 사용하고 페이지에 삽입하려면 appendChild 또는 insertBefore을 사용합니다.
간단한 북마크릿을 사용하여 < 스크립트 > 태그를 추가하면 DOM에 필요한 요소를 밀어 넣고 사용자에게 모달 창을 표시 할 수있는 외부 JavaScript 파일을로드 할 수 있습니다. 양식은 AJAX 요청을 통해 제출되고 서버 측에서 처리되며 성공 또는 사용자가 수정해야하는 오류 목록이 반환됩니다.
자바 스크립트 :
그래서 북마크는 같을 것이다 코드에-추가 스크립트 태그와 - 초기화 - 더 - 스크립트;외부 스크립트가 포함됩니다 :
CSS 효과를 사용하여 창 효과를 얻을 수 있습니다.
이 특정 작업에 대한 하나의 완전한 리소스에 관해서는, 당신은 무엇이든 찾아내는 것이 매우 운이 좋을 것입니다. 그러나 작고 개별적인 부품을 살펴보면 많은 리소스를 찾을 수 있습니다. 모달 창에 대한 정보, DOM에 요소 추가 및 AJAX 처리에 대해 살펴보십시오.
감사합니다. z-index를 다루고 플래시 (문제가 있음)를 제거하고 처음에 필요로하지 않았던 iframe에 대한 훌륭한 대답입니다. 당신도 인라인 CSS를 사용하는 것을 보았습니다. 그게 내가 가진 문제 중 하나입니다. – jplindstrom