웹 페이지의 특정 부분에 연결

웹 페이지의 특정 부분에 연결

---

내가 관리하지 않는 다른 웹 사이트의 긴 웹 페이지 부분에 대한 링크를 생성하려면 어떻게해야합니까?

내 링크 끝에 #partofpage의 변형을 사용할 수 있다고 생각했습니다. 어떤 제안?

---

그냥 APPEND #의 ID로 다음 <a>(A처럼, 또는 다른 HTML 태그 태그 <section>당신이 얻으려고 노력하고 있다는). 예를 들어이 HTML의 헤더에 연결하려는 경우 :

<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>

링크를 사용할 수 있습니다 <a href="http://url.to.site/index.html#target">Link</a>.

---

다음 형식을 사용하여 "점프 링크"를 만듭니다.

http://www.somesite.com/somepage#anchor

앵커는 해당 페이지에서 링크하려는 요소의 ID입니다. 브라우저 개발 도구 / 소스보기를 사용하여 연결하려는 요소의 ID를 찾으십시오.

요소에 ID가없고 해당 사이트를 제어하지 않으면 할 수 없습니다.

---

해당 사이트가 페이지에서 앵커를 선언 한 경우에만 가능합니다. 태그에 이름 또는 ID 속성 을 부여하여 수행 되므로 링크하려는 위치에 가까운 항목을 찾으십시오.

그리고 구문은

<a href="page.html#anchor">text</a>

---

대상 페이지가 동일한 도메인에 있고 (즉, 페이지와 동일한 출처 를 공유하는 경우 ) 새 탭 생성에 신경 쓰지 않는 경우 (1), 일부 JavaScript를 사용할 수 있습니다 .

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

하찮은 일:

var w = window.open('some URL of the same origin');
w.onload = function(){
  // do whatever you want with `this.document`, like
  this.document.querySelecotor('footer').scrollIntoView()
}

지금 바로 시도 할 수있는 이러한 '악용'의 실제 예는 다음과 같습니다.

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

이것을 위치 표시 줄에 입력 javascript:하거나 ( Chrome 이 클립 보드에서 붙여 넣을 때 접두사를 제거한다는 점에 유의 ) href이 페이지의 링크 값으로 만들고 (개발자 도구 사용) 클릭하면 다른 (중복) SO 질문 페이지가 스크롤됩니다. 바닥 글과 바닥 글이 빨간색으로 칠해졌습니다. (로드 후 바닥 글을 아래로 밀어내는 ajax로드 콘텐츠에 대한 해결 방법으로 지연이 추가되었습니다.)

메모

• 현재 Chrome 및 Firefox에서 테스트되었으며 정의 된 표준 동작을 기반으로하므로 일반적으로 작동합니다.
• 원본 페이지와 분리되어 있기 때문에 여기 SO에서 대화 형 스 니펫으로 설명 할 수 없습니다.
• MDN : Window.open ()
• (1) 이벤트를 window.open(url,'_self')깨는 것 같습니다 load. 기본적으로 window.open일반 a href=""클릭 탐색 처럼 작동합니다 . 아직 더 연구하지 않았습니다.

---

첫 번째 대상은 링크하려는 HTML 코드 또는 크롬 개발자 도구에서 찾은 BlockID를 나타냅니다. 각 코드는 다르며 참조하려는 ID를 찾으려면 몇 가지 작업을 수행해야합니다. 이것은 div class="page-container drawer-page-content" id"PageContainer"개별 텍스트 나 이미지가 아닌 전체 참조 섹션의 형식입니다. 그렇게하려면 동일한 코드를 찾아야하지만 대상 블록과 관련된 것입니다. 예를 들어 dv id="your-block-id"어쨌든 나는 방금이 스레드를 읽고 있었고 아이디어가 내 마음에 떠 올랐습니다. 당신이 Shopify 사용자이고 이것을하고 싶다면 언급 된 것과 거의 같습니다. 그러나 대신

> http://url.to.site/index.html#target

당신은 넣을 것입니다

> http://storedomain.com/target

예를 들어, 내 홈페이지에 뉴스 레터 가입 및 쇼핑 블록으로 연결되는 링크가있는 면책 조항 페이지를 설정하여 https://mystore-classifier.com/#shopify-section-1528945200235하이퍼 링크를 삽입 합니다. -classifier는 내 내부 용이며 귀하에게 적용되지 않습니다. 이것은 단지 내 매장을 추적 할 수 있도록하기위한 것입니다. 홈페이지 이외의 링크를 원하신다면

> http://mystore-classifier.com/pagename/#BlockID

누군가가 유용하다고 생각했으면 좋겠습니다. 제 설명에 문제가 있으면 제가 HTML 프로그래머가 아니므로 제 언어는 C #입니다!

---

곧 출시 될 Chrome "텍스트로 스크롤"기능이 바로 여러분이 찾고있는 것입니다 ....

https://github.com/bokand/ScrollToTextFragment

기본적으로 #targetText=URL 끝에 추가 하면 브라우저가 대상 텍스트로 스크롤하여 페이지가로드 된 후 강조 표시합니다.

It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.

참고URL : https://stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page