당신은 당신을 낙담하게 하는 사이트를 만난 적이 있습니까?

13916 단어 javascript
다음과 같은 이유로 낙담했습니다.
(917) 무장애성.
  • 색상 명암비.
  • 글꼴이 너무 작고 글꼴 유형이 comic-sans로 설정되었습니다.
  • 입력이 자동으로 초점을 맞추지 않습니다.일반적으로 로그인 페이지에 있습니다.
  • 광고 블록이 설치되어 있기 때문에 사이트를 스크롤할 수 없습니다.
  • 비활성화된 엔티티
    • 를 클릭할 수 없습니다.
  • 단축키 없음
  • 수동으로 대량 입력 폼
    • 걱정하지 마세요. 제가 명세서에 있는 몇 가지 일을 공유할 테니, 당신이 무엇을 할 수 있겠습니까?

    1. 비활성화된 드롭다운 목록/버튼을 클릭할 수 없습니다.


    일반적으로 나는 클라이언트에서 검증할 때 이런 상황을 만날 수 있다.개발자가 이 점을 실현하는 것은 사용자가 재미있는 일을 하는 것을 확보하고 방지하기 위해서이다.참고로 클라이언트 검증일 뿐입니다. 솔직히 모든 개발자가 백엔드 검증을 할 시간이 있는 것은 아닙니다.그래서 우리가 이용할 수 있는 곳이야.
    대부분의 경우 DOM은 다음과 같은 구조를 갖습니다.
    <!-- copied from w3school -->
<label for='iphone'>Buy iphone now!!</label>

<select id='iphone'>
  <option value='6'>6 (only 50 left)</option>
  <option value='7' disabled>7 (sorry out of stocks)</option>
  <option value='8'>8</option>
</select>
    너는 아이폰 7을 매우 사고 싶지만 하나도 없다.우리는 아직도 무엇을 기다리고 있습니까?devtools를 열고 CMDSHIFTc(mac)나 CTRLSHIFTc(Windows/linux)로 요소를 검사한 다음 마우스를 밑에 있는 메뉴에 놓으면 됩니다.그런 다음 disable를 두 번 클릭하여 제거하면 됩니다.지금 폼을 선택하고 제출하려고 시도합니다.만약 잘못된 정보가 없다면, 우리는 모두 매우 좋다!!.비활성화된 단추에 대해 같은 기술을 사용할 수 있습니다.
    또한 개발자는 요소를 user-select: none로 설정할 수 있음을 주의하십시오.따라서 이 경우 css 속성을 삭제하기만 하면 됩니다.

    개발자 참고 사항:

  • 서버 쪽에서 검증하는 것을 고려해야 합니다.
  • 작성 테스트를 하면 안심하고 발송할 수 있습니다.
  • 클라이언트에 대해 자바스크립트 if-else 문장에 두 번째 검증을 추가합니다.이것은 완벽한 해결 방안은 아니지만, 장난꾸러기 사용자들에게 어려운 시간을 줄 뿐이다.
    • function submit(e) {
  e.preventDefault()

  if (!isFormValid) {
    showErrorMessage = true
  }

  fetch('your-post-url', { method: 'POST' }).then(console.log)
}

    2. 광고 블록을 설치했기 때문에 사이트를 스크롤할 수 없습니다.


    만약 네가 공교롭게도 이 점을 마주한다면 우리는 같은 편에 서 있을 것이다.사이트가 통상적으로 굴러다니는 것을 막고 큰 팝업 모드가 있기 때문에 좀 짜증난다.그래서 이 문제를 어떻게 극복할 것인가는 다음과 같다.
    이 확장 설치
    https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld .
    이 확장을 사용하면 자바스크립트나 css를 주입할 수 있습니다.그래서 이 예에서, 나는 dev가 overflow: none 바디에 추가되는 것을 보통 알아차린다.
    body { overflow: hidden };
    따라서 Dell이 이러한 상황에 대처하는 방법은 다음과 같습니다.
  • 덮어쓸 웹 사이트에 있어야 합니다.
  • 확장 을 클릭하고 신규 추가 를 클릭합니다.
  • 새 탭으로 리디렉션됩니다.
  • 이 css를 css 부분에 붙여넣기
    • body { overflow: unset !important }
  • 간단하죠?왠지 모든 사이트가 이렇게 구성된 것은 아니다.
  • 가끔 막힌 것은 몸이 아니다.이 가능하다, ~할 수 있다,...
  • 이외에 이것을 각 사이트에 올려도 우호적이지 않다.따라서 이 경우 matchurl을 <body>로 변경하면 모든 사이트에 실행됩니다.부작용이 있을 수 있으니 주의해라.
    • 대모태는 어때?다음 방법으로 모드를 삭제할 수 있습니다.
      document.querySelector('.ads-modal').remove()
    그러나 이것은 좀 까다롭다. 왜냐하면 우리는 모태가 언제 우리에게 보여질지 모르기 때문이다.그래서 나는 너희들과 자동으로 모드를 제거하는 방법을 공유할 것이다.

    변종 관찰자 + 약속 사용


    돌연변이 관찰자의 기본 사상은 관찰된 원소에 어떤 변화가 생기면 하나의 사건을 촉발한다는 것이다.예를 들어 속성, 클래스, 하위 대상이 변경되거나 추가되거나 삭제되고 있는 경우.
    이 기능은 특히 브라우저를 사용하여 확장할 때 매우 편리하고 유용하다.나도 공교롭게도 나의 extension here에서 이 함수를 사용했다.
    // The original of work is from StackOverflow.
function waitForElm(selector) {
    return new Promise(resolve => {
      if (document.querySelector(selector)) {
        console.log('found')
        return resolve(document.querySelector(selector))
      }

      const observer = new MutationObserver(() => {
        if (document.querySelector(selector)) {
          console.log('found, observer.disconnect()')
          resolve(document.querySelector(selector))
          observer.disconnect()
        }
      })

      observer.observe(document.body, {
        childList: true,
        subtree: true,
      })
    })
  }

// find the element that you want to delete. 
// Once mutation observer found it, it will resolve and run .remove()
waitForElm('.ads-modal').then(x => x.remove())

    개발자 참고 사항


    너는 광고 블록을 사용하는 사용자를 징벌하기 위해 많은 일을 할 수 있다.
  • 당신은 통과할 수 있습니다
    .
  • 관찰할 원소를 MutationObserver로 표시한다.요소의 속성이나 css 속성이 바뀌고 있는지 확인하십시오. 만약 그렇다면 사용자 정의 스크립트를 실행하십시오.
  • 대형 팝업 창이 나오기 전에*로 내용을 읽는 사람도 있다.그래서 이 예에서 사용자 정의 css 인쇄 미디어 조회를 작성합니다.
    •   @media print { 
    body.user-has-ads-block * { display: none !important }
  }
  • 하지만, 만약 당신이 정말 위에서 언급한 것처럼 한다면, 나는 당신이 곧 어떤 방문객도 받지 못할 것이라고 믿습니다.🤣.

    • 3. 사이트에서 단축키를 제공하지 않습니다


    만약 당신이 어느 사이트의 단골손님이고 공교롭게도 특정한 버튼/동작을 많이 눌렀다면 당신은 자신의 단축키를 만들 수 있습니다.우리는 이곳에서 같은 확장을 사용할 것이다. 다음은 트위터 print mode (왼쪽 내비게이션) 를 더 빨리 내비게이션할 수 있는 단축키를 공유하고 싶다.
    // go to twitter.com, and click "add new" at the extension popup. 
// you might want to change the url match to https://twitter.com/**
// put this script in javascript section
document.body.addEventListener('keyup', function(event) {
  if (event.ctrlKey) {
    const navEle = document.querySelector('nav')
    const noKeyPress = +event.code.replace('Digit', '') // get user key pressed and convert it to number

    // if user click No that larger than menu navigation has, then ignore it.
    if (noKeyPress > navEle.children.length - 1) {
      return
    }

    // click the nav item
    navEle.children[noKeyPress - 1].click()
  }
})
    지금 설정이 되어 있습니다. Ctrl2를 누르면 내비게이션이 됩니다.원하는 대로 바로 가기를 사용자 정의할 수 있습니다.

    총결산


    그러니 어떤 사이트에서 좌절을 겪은 적이 있다면 스크립트를 써라.스크립트를 보다 창의적으로 작성할 수도 있습니다.
  • 당신의 물건을 자동화합니다.예를 들어 한시적으로 개방된 인기 상품을 구매한다.
  • 거래시장에서 매입/판매(apitho와 함께 집행해야 함)를 집행한다.
  • 게임에서 발을 동동 구른다.
  • 품질 엔지니어에게 테스트를 제공한다.
  • 보안 목적으로 사이트에서 빈틈을 찾아낸다.
    • 당신이 뭔가를 배울 수 있기를 바랍니다. 시간을 내주셔서 감사합니다.
    표지 사진 작성자: https://unsplash.com/@punttim
    M5 Paper+PlatformIO+Arduino의 Hello World
    2021-10-14 TIL

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage