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

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

내 링크 끝에 #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)})})('/programming/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 끝에 추가 하면 브라우저가 대상 텍스트로 스크롤하여 페이지가로드 된 후 강조 표시합니다.

내 책상에서 실행되는 Chrome 버전이지만 현재 수동으로 활성화해야합니다. 아마도 곧 프로덕션 Chrome 빌드에서 기본적으로 활성화되고 다른 브라우저가 뒤따를 것이므로 지금 링크에 추가를 시작하면 작동이 시작됩니다.