북마크릿(예: Google 리더의 메모)을 사용하여 사이트 페이지에 양식을 표시하는 방법은 무엇입니까?

Question

Google 리더에서는 북마크를 사용하여 방문 중인 페이지를 '메모'할 수 있습니다.북마크를 누르면 현재 페이지 상단에 작은 Google 양식이 표시됩니다.양식에 설명 등을 입력할 수 있습니다.제출을 누르면 페이지를 떠나지 않고 양식이 자동으로 제출된 다음 양식이 사라집니다.대체로 매우 부드러운 경험입니다.

나는 분명히 그것이 어떻게 완료되었는지 살펴보려고 노력했지만 가장 흥미로운 부분은 축소되어 읽을 수 없습니다.그래서...

(브라우저 측에서) 이와 같은 것을 구현하는 방법에 대한 아이디어가 있습니까?어떤 문제가 있나요?이를 설명하는 기존 블로그 게시물이 있습니까?

Answer 1

Aupajo의 말이 맞습니다.그러나 우리 사이트(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 위치 지정에 적합하지 않은 요소(예: 플래시)를 숨깁니다.마지막으로 iframe 내에서 실행되는 자바스크립트와의 통신을 용이하게 합니다.이런 방식으로 상위 문서에 iframe을 제거하라고 지시하는 닫기 버튼을 iframe에 가질 수 있습니다.이런 종류의 도메인 간 작업은 약간 해킹적이지만 이것이 (내가 본) 유일한 방법입니다.

마음이 허약해서가 아닙니다.JavaScript에 능숙하지 않다면 어려움을 겪을 준비를 하십시오.

Answer 2

매우 기본적인 수준에서는 다음을 사용합니다. createElement 페이지에 삽입할 요소를 생성하고 appendChild 또는 insertBefore 페이지에 삽입합니다.

Answer 3

간단한 북마크를 사용하여 필요한 요소를 DOM에 푸시하고 사용자에게 모달 창을 표시할 수 있는 외부 JavaScript 파일을 로드하는 <script> 태그를 추가할 수 있습니다.양식은 AJAX 요청을 통해 제출되고 서버 측에서 처리되며 성공 또는 사용자가 수정해야 하는 오류 목록을 반환합니다.

따라서 북마크릿은 다음과 같습니다.

javascript:code-to-add-script-tag-and-init-the-script;

외부 스크립트에는 다음이 포함됩니다.

• DOM에 요소를 추가하는 기능
• 해당 요소의 innerHTML을 사용자에게 표시하려는 마크업으로 업데이트하는 기능
• AJAX 양식 처리를 위한 처리

창 효과는 CSS 위치 지정을 통해 얻을 수 있습니다.

이 특정 작업에 대한 하나의 완전한 리소스에 관해서는 무엇이든 찾을 수 있다면 매우 운이 좋을 것입니다.그러나 더 작은 개별 부품을 살펴보면 많은 리소스를 찾을 수 있습니다.모달 창, DOM에 요소 추가 및 AJAX 처리에 대한 정보를 살펴보세요.