KR20180020971A - 무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법 - Google Patents

무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법 Download PDF

Info

Publication number
KR20180020971A
KR20180020971A KR1020177035508A KR20177035508A KR20180020971A KR 20180020971 A KR20180020971 A KR 20180020971A KR 1020177035508 A KR1020177035508 A KR 1020177035508A KR 20177035508 A KR20177035508 A KR 20177035508A KR 20180020971 A KR20180020971 A KR 20180020971A
Authority
KR
South Korea
Prior art keywords
content
scroll
viewport
inline frame
information resource
Prior art date
Application number
KR1020177035508A
Other languages
English (en)
Other versions
KR102038640B1 (ko
Inventor
티안지우 인
쿤 장
Original Assignee
구글 엘엘씨
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 구글 엘엘씨 filed Critical 구글 엘엘씨
Publication of KR20180020971A publication Critical patent/KR20180020971A/ko
Application granted granted Critical
Publication of KR102038640B1 publication Critical patent/KR102038640B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

본 명세서에서 스크롤 이벤트를 할당하는 시스템 및 방법이 설명된다. 시스템은 클라이언트 디바이스에 무한 스크롤 할당 스크립트를 제공할 수 있다. 스크립트는 클라이언트 디바이스로 하여금 페이지의, 컨텐츠 문서가 내장된 인라인 프레임의 크기를 어플리케이션의 뷰포트에 대응되는 크기로 설정하도록 하고, 스크롤 이벤트의 검출에 응답하여 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값보다 작거나 같은지 결정하도록 할 수 있다. 스크립트는 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여 제2컨텐츠 문서 단부와 제2뷰포트 단부사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정하도록 하여, 제1 및 제2오프셋의 결정에 응답하여 스크롤 이벤트를 인라인 프레임에 할당한다.

Description

무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법
본 출원은 2015년 10월 26일에 출원된 미국 가출원 번호 제62/246,453호(발명의 명칭: "무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법")의 우선권 및 이점을 주장하는 2016년 2월 3일에 출원된 미국 특허 출원 번호 제15/014,795호(발명의 명칭 : "무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법")의 우선권 및 이점을 주장하며, 이들 각각은 그 전체가 참조로 본 명세서에 통합된다.
인터넷과 같은 컴퓨터 네트워크 환경에서, 컨텐츠 제공자는 최종 사용자 컴퓨팅 디바이스에 디스플레이하기 위한 컨텐츠를 제공한다. 이 컨텐츠는 컨텐츠 제공자와 연관된 웹 페이지에 링크될 수 있다. 컨텐츠는 컨텐츠 아이템을 제공한 컨텐츠 제공자를 식별하는 컨텐츠를 포함할 수 있다. 발행자가 제공한 컨텐츠는 해당 발행자와 연관된 웹 페이지에 표시될 수 있다.
제1양태는 어플리케이션에 스크롤 이벤트를 할당하는 방법에 관한 것으로, 정보 자원 페이지의 제1인라인 프레임의 크기를 정보 자원이 디스플레이되고 있는 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계로서, 상기 제1인라인 프레임에는 적어도 제1컨텐츠 문서가 내장되고; 어플리케이션에서 스크롤 이벤트를 모니터링하는 단계; 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값(first predetermined threshold value) 보다 작거나 같은지 결정하는 단계; 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정하는 단계; 제1오프셋이 제1임계보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여 스크롤 이벤트를 제1인라인 프레임에 할당하는 단계; 및 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계;를 포함한다.
일부 구현예에서, 상기 방법은 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 것에 응답하여, 정보 자원 페이지에 제2인라인 프레임을 추가(append)하는 단계를 더 포함하고, 상기 제2인라인 프레임에는 적어도 제2컨텐츠 문서가 내장된다. 상기 방법은 정보 자원 페이지의 제2인라인 프레임의 크기를 정보 자원이 디스플레이되는 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계; 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제3오프셋이 제3임계값보다 작거나 같은지 결정하는 단계; 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제4오프셋이 제4임계값보다 크거나 같은지 결정하는 단계; 및 제3오프셋이 제3임계값보다 작거나 같다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정에 응답하여 스크롤 이벤트를 제2인라인 프레임에 할당하는 단계;를 더 포함한다. 상기 방법은 제3오프셋이 제3임계값보다 작거나 같다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정의 적어도 하나에 응답하여, 어플리케이션의 스크롤 이벤트를 모니터링하는 단계;를 더 포함한다. 상기 방법은 제2컨텐츠 문서의 크기가 뷰포트의 크기보다 작은지 결정하는 단계; 제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하는 단계; 및 제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하는 것에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계;를 더 포함한다. 상기 방법은 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는지 결정하는 단계; 및 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는다는 결정에 응답하여, 제2인라인 프레임을 추가하는 단계;를 더 포함하며, 상기 제2인라인 프레임에는 적어도 제2컨텐츠 문서가 내장된다. 상기 방법은 정보 자원 페이지에 스크롤 이벤트를 할당한 후 제1인라인 프레임에 대해, 제1인라인 프레임을 위한 제1컨텐츠 문서에 대한 보조 컨텐츠 부가물을 모니터링하는 단계를 더 포함하는 것으로서, 상기 보조 컨텐츠 부가물은 제1컨텐츠 문서의 크기를 변경하고; 상기 제1오프셋을 결정하는 단계는 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제1오프셋을 결정하는 단계를 더 포함하고; 및 상기 제2오프셋을 결정하는 단계는 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제2오프셋을 결정하는 단계를 더 포함한다. 상기 방법은 어플리케이션의 뷰포트의 크기 변화를 모니터링하는 단계; 및 어플리케이션의 뷰포트의 크기 변화를 검출하는 것에 응답하여, 어플리케이션의 뷰포트의 크기에 대응하도록 정보 자원 페이지의 제1인라인 프레임의 크기를 재설정하는 단계;를 더 포함한다. 정보 자원 페이지의 제1인라인 프레임의 크기를 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계는 정보 자원 페이지의 제1인라인 프레임의 높이를 어플리케이션의 뷰포트의 높이보다 크거나 같도록 설정하는 단계; 및 정보 자원 페이지의 제1인라인 프레임의 폭을 어플리케이션의 뷰포트의 폭보다 크거나 같도록 설정하는 단계;를 더 포함한다. 스크롤 이벤트를 제1인라인 프레임에 할당하는 단계는 제1인라인 프레임의 스크롤 가능 속성을 스크롤 가능으로 할당하는 단계; 및 상기 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계는 정보 자원 페이지의 스크롤 가능 속성을 스크롤 가능으로 할당하는 단계;를 더 포함한다.
적어도 하나의 양태는 어플리케이션에서 스크롤 이벤트를 할당하는 방법에 관한 것으로, 데이터 처리 시스템이 클라이언트 디바이스로 무한 스크롤 할당 스크립트를 제공하는 단계를 포함하고, 상기 스크립트는 클라이언트 디바이스 상에서 실행되어 클라이언트 디바이스가 제1양태에 따른 방법을 수행하도록 구성된다.
적어도 하나의 양태는 어플리케이션에서 스크롤 이벤트를 할당하는 방법에 관한 것이다. 상기 방법은 무한 스크롤 할당 스크립트를 클라이언트 디바이스로 제공하는 단계를 포함할 수 있다. 상기 스크립트는 클라이언트 디바이스 상에서 실행되어 클라이언트 디바이스가 정보 자원 페이지의 제1인라인 프레임의 크기를 정보 자원이 표시되는 어플리케이션의 뷰포트 크기에 대응하도록 설정하게 구성될 수 있다. 상기 제1인라인 프레임에는 적어도 제1컨텐츠 문서가 내장될 수 있다. 스크립트는 클라이언트 장치에서 실행되어 클라이언트 디바이스가 어플리케이션에서 스크롤 이벤트를 모니터링하도록 구성될 수 있다. 스크립트는 클라이언트 디바이스에서 실행되어 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해 제1컨텐츠 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값보다 작거나 같은지 결정하도록 구성될 수 있다. 스크립트는 클라이언트 장치에서 실행되어 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정하도록 구성될 수 있다. 스크립트는 클라이언트 장치에서 실행되어 클라이언트 디바이스가 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여 스크롤 이벤트를 제1인라인 프레임에 할당하도록 구성될 수 있다. 상기 스크립트는 클라이언트 장치에서 실행되어 클라이언트 디바이스가 제1오프셋이 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당하도록 구성될 수 있다.
일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 것에 응답하여 정보 자원 페이지에 제2인라인 프레임을 추가하도록 구성될 수 있다. 상기 제2인라인 프레임에는 적어도 제2컨텐츠 문서가 내장된다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 정보 자원 페이지의 제2인라인 프레임의 크기를 정보 자원이 디스플레이되는 어플리케이션의 뷰포트의 크기에 대응하도록 설정하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제3오프셋이 제3임계값보다 작거나 같은지 결정하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제4오프셋이 제4임계값보다 크거나 같은지 결정하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 제3오프셋이 제3임계값보다 작거나 같다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정에 응답하여 스크롤 이벤트를 제2인라인 프레임에 할당하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 제3오프셋이 제3임계값보다 작거나 같다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정의 적어도 하나에 응답하여, 어플리케이션의 스크롤 이벤트를 모니터링하도록 구성될 수 있다.
일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 제2컨텐츠 문서의 크기가 뷰포트의 크기보다 작은지 결정하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하는 것에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당하도록 구성될 수 있다.
일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는지 결정하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는다는 결정에 응답하여 적어도 제2컨텐츠 문서가 내장된 제2인라인 프레임을 추가하도록 구성될 수 있다.
일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 정보 자원 페이지에 스크롤 이벤트를 할당한 후 제1인라인 프레임에 대해, 제1인라인 프레임을 위한 제1컨텐츠 문서에 대한 보조 컨텐츠 부가물을 모니터링하도록 구성될 수 있다. 보조 컨텐츠 부가물은 제1컨텐츠 문서의 크기를 변경할 수 있다. 일부 구현예에서, 제1오프셋을 결정하는 단계는 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제1오프셋을 결정하는 단계를 더 포함할 수 있다. 일부 구현예에서, 제2오프셋을 결정하는 단계는 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제2오프셋을 결정하는 단계를 더 포함할 수 있다.
일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 어플리케이션의 뷰포트의 크기 변화를 모니터링하도록 구성될 수 있다. 일부 구현예에서, 무한 스크롤 할당 스크립트는 클라이언트 디바이스가 어플리케이션의 뷰포트의 크기 변화를 검출하는 것에 응답하여, 어플리케이션의 뷰포트의 크기에 대응하도록 정보 자원 페이지의 제1인라인 프레임의 크기를 재설정하도록 구성될 수 있다.
일부 구현예에서, 정보 자원 페이지의 제1인라인 프레임의 크기를 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계는 정보 자원 페이지의 제1인라인 프레임의 높이를 어플리케이션의 뷰포트의 높이보다 크거나 같게 설정하도록 구성될 수 있다. 일부 구현예에서, 정보 자원 페이지의 제1인라인 프레임의 크기를 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계는 정보 자원 페이지의 제1인라인 프레임의 폭을 어플리케이션의 뷰포트의 폭보다 크거나 같게 이상으로 설정하는 단계를 더 포함할 수 있다. 일부 구현예에서, 스크롤 이벤트를 제1인라인 프레임에 할당하는 단계는 제1인라인 프레임의 스크롤 가능 속성을 스크롤 가능으로 할당하는 단계를 더 포함할 수 있다. 일부 구현예에서, 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계는 정보 자원 페이지의 스크롤 가능 속성을 스크롤 가능으로 할당하는 단계를 더 포함할 수 있다.
적어도 하나의 양태는 어플리케이션에서 스크롤 이벤트를 할당하는 시스템에 관한 것이다. 시스템은 컨텐츠 추가(inclusion) 모듈, 스크롤 감지 모듈 및 하나 이상의 프로세서에서 실행되는 스크롤 할당 모듈을 포함할 수 있다. 컨텐츠 추가 모듈은 정보 자원이 디스플레이되고 있는 어플리케이션의 뷰포트의 크기에 대응하도록 정보 자원 페이지의 제1인라인 프레임의 크기를 설정할 수 있다. 제1인라인 프레임에는 적어도 제1컨텐츠 문서가 내장될 수 있다. 스크롤 감지 모듈은 어플리케이션의 스크롤 이벤트를 모니터링할 수 있다. 스크롤 감지 모듈은 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값 보다 작거나 같은지 결정할 수 있다. 스크롤 감지 모듈은 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정할 수 있다. 스크롤 할당 모듈은 제1오프셋이 제1임계보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여 제1인라인 프레임에 스크롤 이벤트를 할당할 수 있다. 스크롤 할당 모듈은 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈은 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 것에 응답하여, 정보 자원 페이지에 제2인라인 프레임을 추가할 수 있다. 제2인라인 프레임에는 적어도 제2컨텐츠 문서가 내장될 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈은 정보 자원 페이지의 제2인라인 프레임의 크기를 정보 자원이 디스플레이되는 어플리케이션의 뷰포트의 크기에 대응하도록 설정할 수 있다. 일부 구현예에서, 스크롤 감지 모듈은 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제3오프셋이 제3임계값보다 작거나 같은지 결정할 수 있다. 일부 구현예에서, 스크롤 감지 모듈은 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제4오프셋이 제4임계값보다 크거나 같은지 결정할 수 있다. 일부 구현예에서, 스크롤 할당 모듈은 제3오프셋이 제3임계값보다 작거나 같다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정에 응답하여 스크롤 이벤트를 제2인라인 프레임에 할당할 수 있다. 일부 구현예에서, 스크롤 감지 모듈은 제3오프셋이 제3임계값보다 작거나 같다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정의 적어도 하나에 응답하여, 어플리케이션의 스크롤 이벤트를 모니터링할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈은 제2컨텐츠 문서의 크기가 뷰포트의 크기보다 작은지 결정할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈은 제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정할 수 있다. 일부 구현예에서, 스크롤 할당 모듈은 제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하는 것에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈은 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는지 결정할 수 있다. 컨텐츠 추가 모듈은 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는다는 결정에 응답하여, 적어도 제2컨텐츠 문서가 내장된 제2인라인 프레임을 추가할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈은 정보 자원 페이지에 스크롤 이벤트를 할당한 후 제1인라인 프레임에 대해, 제1인라인 프레임을 위한 제1컨텐츠 문서에 대한 보조 컨텐츠 부가물을 모니터링할 수 있다. 보조 컨텐츠 부가물은 제1컨텐츠 문서의 크기를 변경할 수 있다. 스크롤 감지 모듈은 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제1오프셋을 결정할 수 있다. 일부 구현예에서, 스크롤 할당 모듈은 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제2오프셋을 결정할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈은 어플리케이션의 뷰포트의 크기 변화를 모니터링할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈은 어플리케이션의 뷰포트의 크기 변화를 검출하는 것에 응답하여, 어플리케이션의 뷰포트의 크기에 대응하도록 정보 자원 페이지의 제1인라인 프레임의 크기를 재설정할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈은 정보 자원 페이지의 제1인라인 프레임의 높이를 어플리케이션의 뷰포트의 높이보다 크거나 같도록 설정할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈은 정보 자원 페이지의 제1인라인 프레임의 폭을 어플리케이션의 뷰포트의 폭보다 크거나 같도록 설정할 수 있다. 일부 구현예에서, 스크롤 할당 모듈은 정보 자원 페이지의 제1인라인 프레임의 높이를 어플리케이션의 높이보다 크거나 같게 설정할 수 있다. 일부 구현예에서, 스크롤 할당 모듈은 정보 자원 페이지의 제1인라인 프레임의 폭을 어플리케이션의 뷰포트의 폭보다 크거나 같도록 설정할 수 있다.
양태들 및 구현예들이 임의의 편리한 형태로 구현될 수 있음을 이해할 것이다. 예를 들어, 양태 및 구현예는 유형의 전달 매체(예컨대, 디스크) 또는 무형의 전달 매체(예컨대, 통신 신호)일 수 있는 적절한 전달 매체를 통해 전달될 수 있는 적절한 컴퓨터 프로그램에 의해 구현될 수 있다. 또한, 양태는 컴퓨터 프로그램을 실행하는 프로그램 가능한 컴퓨터의 형태를 취할 수 있는 적절한 디바이스를 사용하여 구현될 수도 있다. 이들 및 다른 양태 및 구현예는 이하에서 상세히 논의된다. 전술한 정보 및 다음의 상세한 설명은 다양한 양태 및 구현의 예시적인 실시예를 포함하고 청구된 양태 및 구현의 본질 및 특성을 이해하기 위한 개요 또는 프레임워크를 제공한다. 도면은 다양한 양태 및 구현예의 예시 및 추가 이해를 제공하며, 본 명세서에 통합되어 본 명세서의 일부를 구성한다.
추가 도면은 일정한 비율로 그려지는 것은 아니다. 다양한 도면에서 동일한 참조 번호 및 명칭은 동일한 요소를 나타낸다. 명확하게 하기 위해 모든 구성 요소가 모든 도면에 라벨링되지는 않는다. 도면에서,
도 1은 예시적인 구현예에 따른 컴퓨터 네트워크 환경에서 어플리케이션에 스크롤 이벤트를 할당하기 위한 환경의 일 구현을 나타내는 블록도이다.
도 2는 예시적인 구현예에 따른 무한 스크롤 할당 시스템의 일 구현을 나타내는 블록도이다.
도 3A는 예시적인 구현예에 따라 인라인 프레임에 할당된 스크롤 이벤트를 사용하여 제1인라인 프레임에 내장된 컨텐츠 문서의 일부를 나타내는 정보 자원 페이지 및 뷰포트의 블록도이다.
도 3B는 예시적인 구현예에 따라 제1인라인 프레임에 할당된 스크롤 이벤트를 갖는 스크롤 위치에서 도 3A에 도시된 정보 자원 페이지의 블록도이다.
도 3C는 예시적인 구현예에 따라 정보 자원 페이지에 할당된 스크롤 이벤트를 갖는 다른 스크롤 위치에서 도 3A에 도시된 정보 자원 페이지의 블록도이다.
도 3D는 예시적인 구현예에 따라 제2인라인 프레임에 할당된 스크롤 이벤트를 갖는 다른 스크롤 위치에서 도 3A에 도시된 정보 자원 페이지의 블록도이다.
도 3E는 예시적인 구현예에 따라 정보 자원 페이지에 할당된 스크롤 이벤트를 갖는 다른 스크롤 위치에서 도 3A에 도시된 정보 자원 페이지의 블록도이다.
도 3F는 예시적인 구현예에 따라 제3인라인 프레임에 할당된 스크롤 이벤트를 갖는 다른 스크롤 위치에서 도 3A에 도시된 정보 자원 페이지의 블록도이다.
도 4는 예시적인 구현예에 따른 어플리케이션상에서 스크롤 이벤트를 할당하는 방법을 나타낸 흐름도이다.
도 5는 예시적인 구현예에 따라 본원에서 설명되고 도시된 시스템 및 방법의 요소를 구현하기 위해 사용될 수 있는 컴퓨터 시스템의 일반적인 구조를 나타내는 블록도이다.
이하는 컴퓨터 네트워크 환경에서 어플리케이션에 스크롤 이벤트를 할당하는 방법, 장치 및 시스템과 관련된 다양한 개념 및 구현예의 보다 상세한 설명이다. 전술한 개념들이 임의의 특정 구현 방식에 제한되지 않기 때문에, 위에서 소개되고 아래에서보다 상세하게 논의되는 다양한 개념은 다양한 방식들 중 임의의 방식으로 구현될 수 있다.
무한 스크롤링을 사용하여, 추가 컨텐츠가 웹 브라우저 또는 네이티브 모바일 어플리케이션과 같은 인터넷 기반 어플리케이션에서 동일한 정보 자원 페이지(예컨대, 웹 페이지 또는 어플리케이션 페이지)에 동적으로 추가(append)될 수 있다. 예를 들어, 어플리케이션의 스크롤 위치가 정보 자원 페이지의 단부(end)로 접근하면, 어플리케이션은 제3자 소스로부터의 추가 컨텐츠를 동일한 정보 자원 페이지에 추가하고 정보 자원 페이지의 스크롤 길이를 업데이트할 수 있다. 이 예에서, 다양한 제3자 소스로부터의 컨텐츠는 무한 스크롤링을 사용하여 동일한 정보 자원 페이지상에 디스플레이될 수 있다. 인간-컴퓨터 상호 작용의 관점에서, 이 기술은 사용자가 다른 컨텐츠 발행자의 정보 자원 페이지를 탐색하지 않고도 웹 사이트 컨텐츠 발행자가 사용자를 동일한 정보 자원 페이지상에 유지하도록 할 수 있다. 무한 스크롤링의 일 구현예는 인라인 프레임을 사용하는 것일 수 있다. 인라인 프레임은 다른 정보 자원 페이지의 컨텐츠를 포함할 수 있다. 제3자 소스의 컨텐츠가 포함된 인라인 프레임을 삽입할 때, 정보 자원 페이지에 컨텐츠가 제시되는 방식에 여러가지 문제, 예를 들어 한 페이지의 컨텐츠가 다른 페이지와 겹칠 수 있으며 원 코드(original code)의 일부가 제대로 작동하지 않는 등의 문제가 발생할 수 있다. 이러한 문제는 불쾌한 사용자 경험을 초래하여 사용자가 제3자 소스로 이동하여 제3자 페이지의 컨텐츠를 볼 수도 있다.
이러한 문제점 및 다른 과제(challenges)를 해결하기 위해, 본 개시는 스크롤 이벤트를 인라인 프레임 또는 인라인 프레임을 포함하는 정보 자원 페이지에 할당하기(attribute)하기 위한 시스템 및 방법을 제공한다. 정보 자원 페이지는 컨텐츠 문서를 내장(embed)하는 각 인라인 프레임이 하나의 고정된 크기(fixed dimension)이어야 함을 지정하는 스크롤 할당 스크립트를 포함할 수 있다. 예를 들어, 각 인라인 프레임의 높이는 웹 브라우저의 뷰포트 높이 또는 스마트폰 또는 태블릿과 같은 컴퓨팅 디바이스의 화면 높이로 설정될 수 있다. 각 인라인 프레임 내에 내장된 추가 컨텐츠를 갖는 컨텐츠 문서의 길이는 가변적일 수 있지만, 인라인 프레임 자체는 고정된 높이일 수 있음을 이해해야 한다. 정보 자원 페이지에 추가된 각 인라인 프레임의 적어도 하나의 크기를 고정함으로써 다양한 제3자 소스에서 검색된 컨텐츠 문서의 원래 포멧팅 및 프로그래밍 로직이 유지보수될 수 있다.
스크롤 할당 스크립트를 이용하여, 어플리케이션이 스크롤 이벤트(예컨대, onScroll 또는 onTouch)를 검출하면, 어플리케이션은 스크롤 이벤트를 인라인 프레임 중 하나에 할당할지 또는 인라인 프레임을 포함하는 정보 자원 페이지에 할당할지를 동적으로 결정할 수 있다. 어플리케이션은 예를 들어 각 인라인 프레임에 대해, 인라인 프레임에 내장된 컨텐츠 문서의 상부(top)을 뷰포트의 상부와 비교하고 상기 내장된 컨텐츠 문서의 하부(bottom)를 뷰포인트의 하부와 비교할 수 있다. 만약, 내장된 컨텐츠 문서의 상부와 뷰포트의 상부사이의 오프셋이 0보다 작거나 같고(0 이하) 내장된 컨텐츠 문서의 하부와 뷰포트의 하부사이의 오프셋이 0보다 크거나 같으면(0 이상), 어플리케이션은 스크롤 이벤트를 인라인 프레임에 할당하여 인라인 프레임에 내장된 컨텐츠 문서가 스크롤 되도록 할 수 있다. 그렇지 않은 경우, 어플리케이션은 스크롤 이벤트를 모든 인라인 프레임을 포함하는 정보 자원 페이지에 할당하여 정보 자원 페이지가 스크롤 되도록 할 수 있다. 시각적으로, 한 인라인 프레임의 컨텐츠 문서의 스크롤 위치가 끝나면, 전체 정보 자원 페이지는 후속 인라인 프레임이 뷰포트 내에서 풀 뷰(full view)일 때까지 스크롤 가능하게 될 수 있다. 인간-컴퓨터 상호 작용 관점에서, 스크롤 이벤트의 동적 할당의 최종 효과는 사용자에게 다양한 제3자 소스로부터의 컨텐츠 사이의 지속적인(seamless) 경험을 제공하는 것일 수 있다. 따라서, 무한 스크롤링을 제공하기 위해 인라인 프레임의 사용과 관련된, 예를 들어 전술한 정보 자원 페이지 상에 컨텐츠가 제시될 수 있는 방법과 관련된 문제들이 해결될 수 있다. 따라서, 본 개시는 정보가 사용자에게 제시되게 하고 사용자가 개선된 방식으로 정보와 상호 작용할 수 있게 하는 기술적인 환경을 제공하는 방법과 관련 문제점을 해결하는 시스템 및 방법을 제공할 수 있다.
적어도 하나의 양태는 어플리케이션에서 스크롤 이벤트를 할당하는 방법에 관한 것이다. 이 방법은 클라이언트 디바이스에 무한 스크롤 할당 스크립트를 제공하는 단계를 포함할 수 있다. 스크립트는 클라이언트 디바이스에서 실행되도록 구성될 수 있다. 스크립트는 클라이언트 디바이스가 정보 자원 페이지의 제1인라인 프레임의 크기를 정보 자원이 표시되는 어플리케이션의 뷰포트 크기에 대응하도록 설정하도록 구성될 수 있다. 제1인라인 프레임에는 적어도 제1컨텐츠 문서가 내장될 수 있다. 스크립트는 클라이언트 디바이스가 어플리케이션에서 스크롤 이벤트를 모니터링하도록 구성될 수 있다. 스크립트는 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해 제1컨텐츠 제1컨텐츠 문서 단부 (end)와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값보다 작거나 같은지 결정하도록 구성될 수 있다. 스크립트는 클라이언트 디바이스가 스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정하도록 구성될 수 있다. 스크립트는 클라이언트 디바이스가 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여 스크롤 이벤트를 제1인라인 프레임에 할당하도록 구성될 수 있다. 스크립트는 클라이언트 장치에서 실행되어 클라이언트 디바이스가 제1오프셋이 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당하도록 구성될 수 있다.
도 1은 어플리케이션에서 스크롤 이벤트를 할당하는 환경의 일 구현예를 나타낸 블록도이다. 환경(100)은 적어도 하나의 데이터 처리 시스템(110)을 포함한다. 데이터 처리 시스템(110)은 적어도 하나의 프로세서 및 메모리, 예를 들어 처리 회로를 포함할 수 있다. 메모리는 프로세서에 의해 실행될 때 프로세서가 본 명세서에서 설명된 하나 이상의 동작을 수행할 수 있도록 하는 프로세서 실행 가능 명령을 저장한다. 프로세서는 마이크로프로세서, ASIC(주문형 집적 회로), FPGA(필드 프로그램 가능 게이트 어레이) 등 또는 이들의 조합을 포함할 수 있다. 메모리는 전자, 광학, 자기 또는 프로세서로 프로그램 명령을 제공할 수 있는 임의의 다른 저장 디바이스 또는 전송 디바이스를 포함할 수 있지만 이에 한정되는 것은 아니다. 메모리는 플로피 디스크, CD-ROM, DVD, 자기 디스크, 메모리 칩, ASIC, FPGA, ROM, RAM, EEPROM(electrically-erasable ROM), EPROM(erasable-programmable ROM), 플래시 메모리, 광 매체, 또는 프로세서가 명령을 판독할 수 있는 임의의 다른 적절한 메모리를 더 포함할 수 있다. 명령은 임의의 적절한 컴퓨터 프로그래밍 언어의 코드를 포함할 수 있다. 데이터 처리 시스템은 다양한 기능을 수행할 수 있는 하나 이상의 컴퓨팅 디바이스 또는 서버를 포함할 수 있다. 일부 구현예에서, 데이터 처리 시스템은 경매를 호스트하도록 구성된 광고 경매 시스템을 포함할 수 있다. 일부 구현예에서, 데이터 처리 시스템은 광고 경매 시스템을 포함하지 않지만 네트워크(105)를 통해 광고 경매 시스템과 통신하도록 구성된다.
네트워크(105)는 인터넷, 로컬, 와이드, 메트로 또는 다른 영역 네트워크, 인트라넷, 위성 네트워크, 음성 또는 데이터 이동 전화 통신 네트워크와 같은 다른 컴퓨터 네트워크 및 이들의 조합과 같은 컴퓨터 네트워크를 포함할 수 있다. 시스템(100)의 데이터 처리 시스템(110)은 네트워크(105)를 통해, 예를 들어 적어도 하나의 컨텐츠 제공자 컴퓨팅 디바이스(115), 적어도 하나의 컨텐츠 발행자 컴퓨팅 디바이스(120) 또는 적어도 하나의 클라이언트 디바이스(125)와 통신할 수 있다. 네트워크(105)는 사용자 컴퓨팅 디바이스(115), 데이터 처리 시스템(110) 및 예를 들어 웹 서버, 광고 서버와 같은 하나 이상의 컨텐츠 소스간의 정보를 중계하는 임의 형태의 컴퓨터 네트워크일 수 있다. 예를 들어, 네트워크(105)는 근거리 통신망 (LAN), 광역 통신망(WAN), 셀룰러 네트워크, 위성 네트워크 또는 다른 유형의 데이터 네트워크와 같은 인터넷 및/또는 다른 유형의 데이터 네트워크를 포함할 수 있다. 네트워크(105)는 또한 네트워크(105) 내에서 데이터를 수신 및/또는 송신하도록 구성된 임의 수의 컴퓨팅 디바이스(예를 들어, 컴퓨터, 서버, 라우터, 네트워크 스위치 등)를 포함할 수 있다. 네트워크(105)는 임의 수의 고정 배선된(hardwired) 및/또는 무선 접속을 더 포함할 수 있다. 예를 들어, 사용자 컴퓨팅 디바이스(115)는 네트워크(105)에서 다른 컴퓨팅 디바이스에 고정 배선된(예를 들어, 광섬유 케이블, CAT5 케이블 등을 통해) 송수신기와 무선으로(예컨대, WiFi, 셀룰러, 라디오 등을 통해) 통신할 수 있다.
컨텐츠 제공자 컴퓨팅 디바이스(115)는 컨텐츠 제공자 엔티티에 의해 동작되는 서버 또는 다른 컴퓨팅 디바이스를 포함하여 클라이언트 디바이스(125)에서 정보 자원에 디스플레이하기 위한 컨텐츠 아이템을 제공할 수 있다. 컨텐츠 제공자 컴퓨팅 디바이스(115)에 의해 제공된 컨텐츠는 임의의 편리한 형태를 가질 수 있다. 예를 들어, 제3자 컨텐츠는 다른 표시된 컨텐츠와 관련된 컨텐츠를 포함할 수 있고, 예를 들어, 표시된 컨텐츠와 관련된 웹 사이트의 페이지일 수 있다. 부가적으로 또는 대안적으로, 컨텐츠는 주(primary) 컨텐츠(예를 들어, 컨텐츠 발행자 컴퓨팅 디바이스(120)에 의해 제공된 컨텐츠)를 포함하는 웹 사이트 또는 웹 페이지와 같은 정보 자원에 표시하기 위한 제3자 컨텐츠 아이템 또는 창작물(예컨대, 광고)를 포함할 수 있다. 컨텐츠 아이템은 검색 결과 웹 페이지에 또한 디스플레이될 수 있다. 예를 들어, 컨텐츠 제공자 컴퓨팅 디바이스(115)는 웹 페이지의 주 컨텐츠를 회사가 제공하는 회사 웹 페이지와 같은 컨텐츠 웹 페이지의 컨텐츠 슬롯에 디스플레이하거나, 또는 검색 엔진이 제공한 검색 결과 방문 페이지에 디스플레이하기 위한 컨텐츠 아이템의 소스를 제공하거나 컨텐츠 아이템의 소스일 수 있다. 컨텐츠 제공자 컴퓨팅 디바이스(115)와 연관된 컨텐츠 아이템은 스마트폰 또는 다른 클라이언트 디바이스(125)에 어플리케이션 실행의 일부로서 디스플레이된 컨텐츠처럼, 웹 페이지 이외의 정보 자원 상에 디스플레이될 수 있다.
컨텐츠 발행자 컴퓨팅 디바이스(120)는 컨텐츠 발행 엔티티에 의해 동작되는 서버 또는 다른 컴퓨팅 디바이스를 포함하여 네트워크(105)를 통해 디스플레이하기 위한 주 컨텐츠를 제공할 수 있다. 예를 들어, 컨텐츠 발행자 컴퓨팅 디바이스 (120)는 웹 페이지에 표시할 주 컨텐츠를 제공하는 웹 페이지 운영자를 포함할 수 있다. 주 컨텐츠는 컨텐츠 발행자 컴퓨팅 디바이스(120)가 제공한 컨텐츠 이외의 컨텐츠를 포함할 수 있고, 웹 페이지는 컨텐츠 제공자 컴퓨팅 디바이스(115)가 제공한 제3자 컨텐츠 아이템을 디스플레이하기 위해 구성된 컨텐츠 슬롯을 포함할 수 있다. 예를 들어, 컨텐츠 발행자 컴퓨팅 디바이스(120)는 회사의 웹 사이트를 운영할 수 있고 웹 사이트의 웹 페이지에 디스플레이하기 위해 그 회사에 관한 컨텐츠를 제공할 수 있다. 웹 페이지는 컨텐츠 제공자 컴퓨팅 디바이스(115)의 광고와 같은 제3자 컨텐츠 아이템을 디스플레이하기 위해 구성된 컨텐츠 슬롯을 포함할 수 있다. 일부 구현예에서, 컨텐츠 발행자 컴퓨팅 디바이스(120)는 검색 엔진 웹사이트를 운영하는 검색 엔진 운영자의 검색엔진 컴퓨팅 다비이스(예컨대, 서버)를 포함한다. 검색 엔진 웹 페이지의 주 컨텐츠(예컨대, 결과 또는 랜딩된 웹 페이지)는 컨텐츠 제공자 컴퓨팅 디바이스(115)가 제공한 컨텐츠 아이템과 같은 컨텐츠 슬롯에 디스플레이된 제3자 컨텐츠 아이템뿐만 아니라 검색 결과를 포함할 수 있다. 일부 구현예들에서, 컨텐츠 발행자 컴퓨팅 디바이스(120)는 비디오 컨텐츠를 서비스하기 위한 서버를 포함할 수 있다.
최종 사용자 컴퓨팅 디바이스(125)는 네트워크(105)를 통해 통신하도록 구성된 컴퓨팅 디바이스를 포함하여, 컨텐츠 발행자 컴퓨팅 디바이스(120)(예컨대, 주 웹 페이지 컨텐츠 또는 다른 정보 자원)가 제공한 컨텐츠 및 상기 컨텐츠 제공자 컴퓨팅 디바이스(115)(예컨대, 웹 페이지의 컨텐츠 슬롯에 디스플레이하기 위해 구성된 제3자 컨텐츠 아이템)가 제공한 컨텐츠와 같은 데이터를 디스플레이할 수 있다. 클라이언트 디바이스(125), 컨텐츠 제공자 컴퓨팅 디바이스(115) 및 컨텐츠 발행자 컴퓨팅 디바이스(120)는 데스크톱 컴퓨터, 랩톱 컴퓨터, 태블릿 컴퓨터, 스마트폰, 개인 휴대 정보 단말기, 모바일 디바이스, 소비자 컴퓨팅 디바이스, 서버, 클라이언트, 디지털 비디오 레코더, 텔레비전용 셋톱박스, 비디오 게임 콘솔 또는 네트워크(105)를 통해 통신하도록 구성된 임의의 다른 컴퓨팅 디바이스일 수 있다. 최종 사용자 컴퓨팅 디바이스(125)는 최종 사용자가 컨텐츠를 수신하기 위한 요청을 제출할 수 있는 통신 디바이스일 수 있다. 요청은 검색 엔진에 대한 요청일 수 있으며, 요청은 검색 쿼리를 포함할 수 있다. 일부 구현예에서, 요청은 웹 페이지에 액세스하는 요청을 포함할 수 있다.
컨텐츠 제공자 컴퓨팅 디바이스(115), 컨텐츠 발행자 컴퓨팅 디바이스(120) 및 최종 사용자 컴퓨팅 디바이스(125)는 프로세서 및 메모리, 예를 들어, 처리 회로를 포함할 수 있다. 메모리는 프로세서에 의해 실행될 때 프로세서가 본 명세서에 설명된 하나 이상의 동작을 수행하도록 하는 기계 명령어를 저장한다. 프로세서는 마이크로 프로세서, ASIC(application-specific integrated circuit), FPGA( field- programmable gate array) 또는 이들의 조합을 포함할 수 있다. 메모리는 전자, 광학, 자기 또는 프로세서에 프로그램 명령을 제공할 수 있는 임의의 다른 저장 디바이스 또는 전송 디바이스를 포함할 수 있지만 이에 한정되는 것은 아니다. 메모리는 플로피 디스크, CD-ROM, DVD, 자기 디스크, 메모리 칩, ASIC, FPGA, ROM, RAM, EEPROM, EPROM), 플래시 메모리, 광 매체 또는 프로세서가 명령을 판독할 수 있는 임의의 다른 적절한 메모리를 포함할 수 있다. 명령은 적절한 컴퓨터 프로그래밍 언어의 코드가 포함될 수 있다.
컨텐츠 제공자 컴퓨팅 디바이스(115), 컨텐츠 발행자 컴퓨팅 디바이스(120) 및 최종 사용자 컴퓨팅 디바이스(125)는 또한 하나 이상의 사용자 인터페이스 디바이스를 포함할 수 있다. 일반적으로, 사용자 인터페이스 디바이스는 감각 정보 (예컨대, 디스플레이상의 시각화, 하나 이상의 사운드 등)를 생성함으로써 사용자에게 데이터를 전달하고 및/또는 사용자로부터 수신된 감각 정보를 전자신호(예컨대, 키보드, 마우스, 포인팅 디바이스, 터치스크린 디스플레이, 마이크로폰 등)로 변환하는 임의의 전자 디바이스를 지칭한다. 하나 이상의 사용자 인터페이스 디바이스는 다양한 실시예에 따라, 컨텐츠 제공자 컴퓨팅 디바이스(115), 컨텐츠 발행자 컴퓨팅 디바이스(120) 및 최종 사용자 컴퓨팅 디바이스(125)(예컨대, 내장 디스플레이, 마이크로폰 등)의 하우징 내부에 있거나 또는 컨텐츠 제공자 컴퓨팅 디바이스(115), 컨텐츠 발행자 컴퓨팅 디바이스(120) 및 최종 사용자 컴퓨팅 디바이스(125)(예컨대, 사용자 컴퓨팅 디바이스(115)에 연결된 모니터, 사용자 컴퓨팅 디바이스(115)에 연결된 스피커 등)의 하우징 외부에 있을 수 있다. 예를 들어, 컨텐츠 제공자 컴퓨팅 디바이스(115), 컨텐츠 발행자 컴퓨팅 디바이스(120) 및 최종 사용자 컴퓨팅 디바이스(125)는 네트워크(105)를 통해 하나 이상의 컨텐츠 소스 및/또는 데이터 처리 시스템(110)으로부터 수신된 웹페이지 데이터를 사용하여 웹 페이지를 시각적으로 디스플레이하는 전자 디스플레이를 포함할 수 있다. 일부 구현예에서, 컨텐츠 배치 캠페인 관리자 또는 제3자 컨텐츠 제공자는 컨텐츠 제공자 컴퓨팅 디바이스(115)를 통해 데이터 처리 시스템(110)과 통신할 수 있다. 일부 구현예에서, 컨텐츠 제공자는 컨텐츠 제공자 컴퓨팅 디바이스(115)의 사용자 인터페이스 디바이스에 디스플레이된 사용자 인터페이스를 통해 데이터 처리 시스템 (110)과 통신할 수 있다.
데이터 처리 시스템(110)은 적어도 하나의 서버를 포함할 수 있다. 예를 들어, 데이터 처리 시스템(110)은 적어도 하나의 데이터 센터 또는 서버 팜에 위치한 복수의 서버를 포함할 수 있다. 일부 구현예에서, 데이터 처리 시스템(110)은 컨텐츠 배치 시스템을 포함한다. 데이터 처리 시스템(110)은 적어도 하나의 컨텐츠 요청 모듈(130), 적어도 하나의 컨텐츠 선택 모듈(135), 적어도 하나의 스크립트 제공자 모듈(140) 및 적어도 하나의 데이터베이스(145)를 포함할 수 있다. 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 및 스크립트 제공자 모듈(140) 각각은 적어도 하나의 처리 유닛, 서버, 가상 서버, 회로, 엔진, 에이전트, 어플라이언스를 포함하거나 또는 네트워크(105)를 통해 데이터베이스(145) 및 다른 컴퓨팅 디바이스(예컨대, 컨텐츠 제공자 컴퓨팅 디바이스(115), 컨텐츠 발행자 컴퓨팅 디바이스(120) 또는 클라이언트 디바이스(125))와 통신하는 프로그램 가능 로직 어레이와 같은 다른 로직 디바이스를 포함할 수 있다.
컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 및 스크립트 제공자 모듈(140)은 적어도 하나의 컴퓨터 프로그램 또는 적어도 하나의 스크립트를 포함하거나 실행할 수 있다. 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 및 스크립트 제공자 모듈(140)은 별개의 구성 요소, 단일 구성 요소 또는 데이터 처리 시스템(110)의 일부일 수 있다. 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 제공자 모듈(140)은 하나 이상의 스크립트를 실행하도록 구성된 하나 이상의 프로세서와 같은 소프트웨어 및 하드웨어의 조합을 포함할 수 있다.
데이터 처리 시스템(110)은 하나 이상의 컨텐츠 저장소 또는 데이터베이스(145)를 또한 포함할 수 있다. 데이터베이스(145)는 데이터 처리 시스템(110)에 국부적일 수 있다. 일부 구현예에서, 데이터베이스(145)는 데이터 처리 시스템(110)에 원격일 수 있지만 네트워크(105)를 통해 데이터 처리 시스템(110)과 통신할 수 있다. 데이터베이스(145)는 클라이언트 디바이스(125)에 서비스하기 위해 웹 페이지, 컨텐츠 아이템 및 무한 스크롤 할당 스크립트를 포함할 수 있다. 일부 구현예에서, 웹 페이지, 웹 페이지의 일부 및 컨텐츠 아이템은 도 3A~3F에 예시적으로 도시된 것들을 포함할 수 있다. 데이터베이스(145)의 컨텐츠에 대한 추가 세부 사항은 이하에서 제공될 것이다.
컨텐츠 요청 모듈(130)은 클라이언트 디바이스(125)로부터 컨텐츠에 대한 요청을 수신할 수 있다. 컨텐츠 요청은 하나 이상의 인라인 프레임(예컨대, 웹 페이지 또는 어플리케이션용 페이지)을 포함하는 정보 자원 페이지에 대한 요청, 컨텐츠 아이템에 대한 요청, 또는 정보 자원 페이지의 인라인 프레임 중 하나에 포함될 컨텐츠 문서에 대한 요청 등을 포함할 수 있다. 컨텐츠 요청은 정보 자원 페이지, 컨텐츠 문서 또는 컨텐츠 아이템에 대한 어드레스 또는 식별자를 포함할 수 있다. 예를 들어, 컨텐츠에 대한 요청은 웹 페이지(예컨대, "https://www. example.com/ homepage.html")와 같은 특정 자원를 나타내는 URL(Uniform Resource Locator)을 포함할 수 있다. 컨텐츠 문서 요청의 URL은 정보 자원의 URL과 다른 호스트 페이지를 포함할 수 있다. 예를 들어, 정보 자원 페이지의 URL은 "https:// www.example_host.com/index.html"이지만 컨텐츠 문서의 URL은 "https://www. example_thirdparty.com/article1"일 수 있다. 일부 실시예에서, 컨텐츠 요청 모듈(130)은 한정된 스크롤 속성 표본 스크립트에 대한 요청을 나타내는 표시자를 포함할 수 있는 정보 자원 페이지에 대한 요청을 수신할 수 있다. 예를 들어, 정보 자원 페이지의 요청은 클라이언트 디바이스(125)로 정보 자원 페이지와 함께 무한 스크롤 할당 스크립트를 전송하도록 컨텐츠 요청 모듈(130)을 지정하는 표시자를 포함하는 헤더를 포함할 수 있다. 일부 구현예에서, 컨텐츠 요청 모듈 130)은 컨텐츠 문서에 대한 요청을 연속적 및 반복적으로 수신하여 다른 인라인 프레임에 내장할 수 있다. 일부 구현에서, 정보 자원 페이지는 정보 자원 페이지에 대한 스크립트에 삽입된 무한 스크롤 할당 스크립트를 포함할 수 있다. 일부 구현예에서, 정보 자원 페이지는 정보 자원 페이지에 삽입할 무한 스크롤 할당 스크립트를 검색하기 위한 스크립트를 포함할 수 있다.
컨텐츠 선택 모듈(135)은 클라이언트 디바이스(125)로 전송할 컨텐츠를 결정할 수 있다. 컨텐츠 선택 모듈(135)은 컨텐츠 요청에 포함된 정보 자원 페이지, 컨텐츠 문서 및 컨텐츠 아이템에 대한 어드레스 또는 식별자를 식별할 수 있다. 컨텐츠 선택 모듈(135)은 데이터베이스(145)에 액세스하여 어드레스 또는 식별자에 의해 식별된 정보 자원 페이지, 컨텐츠 문서 또는 컨텐츠 아이템을 선택할 수 있다. 컨텐츠 선택 모듈(135)은 컨텐츠 제공자(115) 또는 컨텐츠 발행자(120)에게 요청을 전송하여 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 액세스, 검색 또는 수신할 수 있다. 컨텐츠 선택 모듈(135)은 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 클라이언트 디바이스(125)에 전송하거나 포워딩할 수 있다. 예를 들어, 데이터 처리 시스템(110)은 클라이언트 디바이스(125)로부터 컨텐츠 문서 요청을 수신하여 정보 자원 페이지의 인라인 프레임에 내장할 수 있다. 요청은 컨텐츠 발행자(120) 중 하나를 나타내는 어드레스를 포함할 수 있다. 이 예에서, 컨텐츠 선택 모듈(135)은 각각의 컨텐츠 발행자(115)로 컨텐츠 문서 요청을 포워딩할 수 있다. 각각의 컨텐츠 발행자(115)로부터의 컨텐츠 문서를 수신하면, 컨텐츠 선택 모듈(135)은 최초로 요청한 클라이언트 디바이스(125)로 컨텐츠 문서를 포워딩할 수 있다.
일부 구현예에서, 컨텐츠 선택 모듈(135)은 요청의 유형을 식별할 수 있다. 일부 구현예에서, 컨텐츠 선택 모듈(135)은 클라이언트 디바이스(125)로부터 수신된 컨텐츠 요청에 기초하여 무한 스크롤 할당 스크립트의 송신 여부를 결정할 수 있다. 컨텐츠 선택 모듈(135)은 요청 유형이 무한 스크롤 할당 스크립트를 전송하기에 적합한 요청인지 결정할 수 있다. 예를 들어, 컨텐츠 선택 모듈(135)은 클라이언트 디바이스(125)에 의해 이미 수신되었거나 클라이언트 디바이스(125)로 전송될 정보 자원 페이지가 무한 스크롤링 성능(capabilities)을 가지고 있는지 결정할 수 있다. 이 예에서, 정보 자원 페이지가 이미 무한 스크롤링을 명시하면, 컨텐츠 선택 모듈(135)은 무한 스크롤 할당 스크립트를 송신할 수 있다. 일부 구현예에서, 컨텐츠 선택 모듈(135)은 광고 경매에 기초하여 디스플레이용 컨텐츠를 선택할 수있는 광고 경매 시스템으로부터 컨텐츠 문서 또는 컨텐츠 아이템을 수신할 수 있다. 광고 경매 시스템은 입찰가, 광고 크기, 클릭률(CTR), 비용 당 마일(CPM) 및 노출율 등과 같은 광고 경매 파라미터에 기초하여 복수의 광고로부터 광고를 선택할 수 있다.
스크립트 제공자 모듈(140)은 클라이언트 디바이스(125)로 컨텐츠를 전송할 수 있다. 클라이언트 디바이스(125)로 전송된 컨텐츠는 적어도 정보 자원 페이지 및 무한 스크롤 할당 스크립트를 포함할 수 있다. 일부 구현예에서, 정보 자원 페이지는 각각 적어도 하나 이상의 컨텐츠 문서가 내장된 하나 이상의 인라인 프레임을 포함하거나 포함하도록 구성될 수 있다. 무한 스크롤 할당 스크립트는 컴퓨터 실행 가능 명령을 포함할 수 있다. 컴퓨터 실행 가능한 명령은 HTML(HyperText Markup Language), XHTML (Extensible HyperText Markup Language), XML (eXtensible Markup Language), CSS(Cascading Style Sheets) 및 JavaScript와 같은 스크립트를 포함할 수 있다. 컴퓨터 실행 가능 명령은 클라이언트 디바이스 (125)의 어플리케이션, 예를 들어 클라이언트 디바이스로 하여금 컨텐츠 요청 모듈(130)에 의해 수신된 컨텐츠 요청을 전송하게 하는 어플리케이션에 의해 실행될 수 있다. 어플리케이션은 예를 들어, 인터넷 브라우저, 모바일 어플리케이션, 또는 컴퓨터 실행 가능 명령을 판독하고 실행할 수 있는 임의의 다른 컴퓨터 프로그램일 수 있다.
간략한 개요에서, 클라이언트 디바이스(125)의 프로세서에 의해 실행될 때, 컴퓨터 실행 가능 명령은 클라이언트 디바이스의 어플리케이션으로 하여금 (a) 정보 자원 페이지의 제1 인라인 프레임의 크기를 정보 자원 페이지가 표시되는 어플리케이션의 뷰포트의 크기로 설정하고; (b) 어플리케이션의 스크롤 이벤트를 모니터링하고; (c) 스크롤 이벤트의 검출에 응답하여, 제1 인라인 프레임에 대해, 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값(first predetermined threshold value)보다 작거나 같은지 결정하고; (d) 스크롤 이벤트의 검출에 응답하여, 제1 인라인 프레임에 대해, 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정하며; (e) 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정한 것에 응답하여, 스크롤 이벤트를 제1 인라인 프레임에 할당하며; 및 (f) 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정과 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여, 스크롤 이벤트를 정보 자원 페이지에 할당하도록 할 수 있다. 무한 스크롤 할당 스크립트의 기능에 관련된 추가 세부 사항들은 도 2 및 도 3A~3F에 대하여 본 명세서에서 제공된다.
도 2는 예시적인 구현예에 따른 무한 스크롤 할당 시스템(200)의 일 구현을 나타내는 블록도이다. 무한 스크롤 할당 시스템(200)은 도 2에서 이하에서 설명되는 것과 같이 컴퓨팅 디바이스의 하나 이상의 프로세서에 의해 구동되거나 실행될 수 있다. 무한 스크롤 할당 시스템(200)은 어플리케이션(205), 정보 자원 페이지(210) 및 무한 스크롤 할당 스크립트(225)를 포함할 수 있다. 어플리케이션(205)은 예를 들어 인터넷 브라우저, 모바일 어플리케이션, 또는 하나 이상의 인라인 프레임(215A-N), 하나 이상의 컨텐츠 문서(220A-N) 및 무한 스크롤 할당 스크립트(225)에 포함된 컴퓨터 실행 가능 명령과 같이, 컴퓨터 실행 가능 명령을 실행하거나 호출할 수 있는 임의의 다른 컴퓨터 프로그램을 포함할 수 있다. 정보 자원 페이지(210)는 하나 이상의 인라인 프레임(215A-N)(예컨대, HTML5의 iframe)을 포함할 수 있다. 하나 이상의 인라인 프레임(215A-N) 각각에는 적어도 하나의 컨텐츠 문서(220A-N)가 내장될 수 있다. 정보 자원 페이지(210)는 무한 스크롤 할당 스크립트(225)와 함께 어플리케이션(205)에 의해 수신될 수 있다. 무한 스크롤 할당 스크립트(225)는 컨텐츠 추가(inclusion) 모듈(230), 스크롤 감지 모듈(235) 및 스크롤 실행 모듈(240)과 같은 하나 이상의 모듈을 포함할 수 있다.
도 3A 내지 도 3F를 참조하면, 도 3A 내지 도 3F 각각은 예시적인 구현에 따라, 어플리케이션 상에 스크롤 이벤트를 발생하기 위한 뷰포트(300A-F)를 나타내는 각각의 디스플레이이다. 도 3A 내지 도 3F에 도시된 예에서, 도 3A 내지 도 3F 각각은 3개의 인라인 프레임(215A-C)과 뷰포트(300)를 포함한다. 3개의 인라인 프레임(215A-C) 각각에는 각각의 컨텐츠 문서(220A-C)가 내장될 수 있다. 각 인라인 프레임(215A-C)의 크기는 적어도 뷰포트(300)만큼 큰 크기로 설정될 수 있다. 예를 들어, 인라인 프레임(215A-C)의 높이는 도 도 3A 내지 도 3F에 도시된 바와같이, 뷰포트(300)의 높이보다 큰 높이로 설정될 수 있다. 반대로, 인라인 프레임(215A-C)의 폭은 도 3A 내지 도 3F에 도시된 바와같이, 뷰포트(300)와 동일한 폭으로 설정될 수 있다. 일부 구현예에서, 인라인 프레임(215A-C)의 크기는 뷰포트(300)보다 작은 크기로 설정될 수 있다. 예를 들어, 인라인 프레임(215A-C)에 내장된 컨텐츠 문서(220A-C)의 크기 중 하나가 뷰포트(300)의 각각의 크기보다 작으면, 각각의 인라인 프레임(215A-C)의 높이와 폭은 각각의 컨텐츠 문서(220A-C)의 높이와 폭으로 설정될 수 있다. 뷰포트(300)는 어플리케이션(205)을 통해 보이는 정보 자원 페이지(210)의 일부를 포함할 수 있다. 뷰포트(300)는 예를 들어, 인터넷 브라우저(예컨대, 어플리케이션(205))를 통해 웹 페이지의 가시 영역(예컨대, 정보 자원 페이지(210) 또는 점선으로 표시된 콘텐트 문서(220A-C))을 포함할 수 있다. 뷰포트(300)는 각각의 인라인 프레임(215A-C)에 내장된 컨텐츠 문서(220A-C)를 포함하고 어플리케이션(205)을 통해 보이는 정보 자원 페이지(210)의 임의의 부분을 디스플레이할 수 있다. 어플리케이션(205)의 뷰포트(300)는 어플리케이션(205) 상의 스크롤링에 의해 조정, 시프트 또는 변경될 수 있다. 일부 구현예에서, 어플리케이션(205)의 스크롤링 특징은 수직, 수평 또는 둘 모두일 수 있고, 정보 자원 페이지(210)의 각각의 축을 따라 이동한다. 뷰포트(300)의 크기는 어플리케이션(205)의 크기를 재조정함으로써 조정되거나 변경될 수 있다. 도 3A 내지 도 3F에 도시된 바와 같이, 정보 자원(210)의 스크롤 축과 3개의 인라인 프레임(215A-C)의 길이는 수직일 수 있다.
간단히 요약하면, 스크롤 이벤트는 뷰포트(300)에 대한 컨텐츠 문서(220A-C)의 위치에 기초하여 인라인 프레임(215A-C) 중의 하나 또는 정보 자원 페이지(210) 중 하나에 할당될 수 있다. 예를 들어, 시각적 관점에서, 인라인 프레임(215A-C) 중 하나가 적어도 높이 방향으로 뷰포트(300)의 전체를 차지하는 경우, 스크롤 이벤트는 각각의 인라인 프레임(215A-C)에 내장된 컨텐츠 문서(220A-C)에 할당될 수 있다. 인라인 프레임(215A-C)에 스크롤 이벤트를 할당하는 것은 도 A, 3B, 3D 및 도 3F에 도시된 바와같같이, 컨텐츠 문서(220A-C) 자체에 대한 스크롤링을 허용한다.
다운 스크롤링할 때 컨텐츠 문서(220A-C)의 하단이 뷰포트(300)의 하단에 근접함에 따라, 스크롤 이벤트의 할당는 인라인 프레임(215A-C)에서 정보 자원 페이지(210)로 변경될 수 있으며, 이에 따라 도 3C 및 도 3E에 도시된 것처럼, 인라인 프레임(215A-C)과 함께 전체 정보 리소스 페이지(210)가 다운 스크롤링된다. 인간-컴퓨터 상호 작용의 관점에서, 정보 자원 페이지(210)와 인라인 프레임(215A-C) 사이에서 스크롤 이벤트의 할당를 전후로 토글하는 것은 각각의 인라인 프레임(215A-C)에 내장된 컨텐츠 문서(220A-C)상의 추가 컨텐츠 사이의 원활한 천이를 허용할 수 있다. 어플리케이션(205)상에서 스크롤 이벤트를 할당하는 프로그래밍 로직은 이하에서 상세히 설명된다.
도 3A 내지 도 3F와 관련하여 다시 도 2를 참조하면, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 정보 자원 페이지(210)에 대한 컨텐츠를 데이터 처리 시스템(110)으로부터 수신하도록 하는 명령을 포함할 수 있다. 데이터 처리 시스템(110)으로부터 수신된 컨텐츠는 적어도 정보 자원 페이지, 하나 이상의 컨텐츠 문서(220A-N) 및 컨텐츠 아이템 등을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 적어도 제1컨텐츠 문서(220A)를 제1인라인 프레임(215A)에 내장하기 위해 디바이스(125)가 제1인라인 프레임(215A)을 정보 자원 페이지(210) 상에 인스턴스화하거나 추가하도록 할 수 있다. 예를 들어, 제1인라인 프레임(215A)을 추가하고 제1컨텐츠 문서(220A)를 제1인라인 프레임(215A)에 내장하기 위해, 컨텐츠 추가 모듈(230)은 HTML5 마크 업 "<iframe src= "https://example.com "> </ iframe>"을 정보 자원 페이지(210)에 삽입할 수 있다. 다른 예에서, 자바 스크립트 (JavaScript)를 사용하여, 컨텐츠 추가 모듈(230)은 "document.createElement (<inline_frame>)" 함수를 호출하여, 문서 객체 모델(DOM) 노드로서의 제1인라인 프레임(215A)을 정보 자원 페이지(210)에 대한 DOM트리로 인스턴트화하고 추가한다. 이 예에서, 컨텐츠 추가 모듈(230)은 "document.getElementbyID (<inline_frame>). src="https "를 호출함으로써 제11컨텐츠 문서(220A)를 내장할 수 있다. 일부 실시예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 정보 자원 페이지(210)상의 기존의 컨텐츠를 제1인라인 프레임(215A)에 내장하도록 할 수 있다. 예를 들어, 정보 자원 페이지(210)가 임의의 인라인 프레임(215A-N)과 분리된 텍스트 및 이미지를 갖는 주 컨텐츠를 포함하면, 컨텐츠 추가 모듈(230)은 정보 자원 페이지(210)로부터 기존의 주 컨텐츠를 이동시켜, 기존의 컨텐츠를 컨텐츠 문서(220A)로서 제1인라인 프레임(215A)에 내장하고, 정보 자원 페이지(210)로부터 기존의 주 컨텐츠를 제거할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 정보 자원 페이지(210)에 제2인라인 프레임(215B)을 추가하도록 할 수 있다. 제2인라인 프레임(215B)은 제2 컨텐츠 문서(220B)와 내장될 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)로 하여금 정보 자원 페이지 (210)가 제1인라인 프레임(215A) 외에 다른 인라인 프레임을 갖지 않는지 여부를 결정하도록 할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 정보 자원 페이지(210)가 제1인라인 프레임(215A) 외에 다른 인라인 프레임을 갖는다는 결정에 응답하여 클라이언트 디바이스(125)가 제2인라인 프레임(215B)을 추가하도록 할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 다른 컨텐츠 문서(225B)의 수신에 응답하여 제2인라인 프레임(215B)을 정보 자원 페이지(210)에 추가하도록 할 수 있다. 예를 들어, 클라이언트 디바이스(125)가 데이터 처리 시스템(110)로부터 다른 컨텐츠 문서(220B)를 수신하면, 컨텐츠 추가 모듈(230)은 정보 자원 페이지(210)에서 다른 인라인 프레임(215B~N)을 인스턴스화하고 컨텐츠 문서(220B~N)를 각각의 인라인 프레임(215B-N)에 내장할 수 있다. 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 제3인라인 프레임(215C)과 같은 하나 이상의 인라인 프레임을 반복적으로 및 동적으로 정보 자원(210)에 추가하도록 할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)로 하여금 각각의 인라인 프레임(215A~N)에 내장된 기존의 컨텐츠 문서(215A-N)에 대한 보조 컨텐츠 부가물을 모니터하도록 할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)로 하여금 인라인 프레임(215A-N)에 내장된 컨텐츠 문서(220A-N) 상에 보조 컨텐츠 부가물을 추가하도록 할 수 있다. 예를 들어, 클라이언트 디바이스(125)가 제1인라인 프레임(215A)에 내장된 컨텐츠 문서(220A)의 단부에 추가될 온라인 광고를 수신하면, 컨텐츠 추가 모듈(230)은 온라인 컨텐츠를 보조 컨텐츠 추가물로서 검출하고 온라인 광고를 컨텐츠 문서(220A)의 단부에 추가한다.
컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)로 하여금 정보 자원 페이지(210)가 디스플레이되는 어플리케이션(205)의 뷰포트(300)의 크기에 대응하도록 정보 자원 페이지(210)의 제1인라인 프레임(215A)의 크기를 설정하도록 하는 명령을 포함할 수 있다. 어플리케이션의 뷰포트(300)의 크기는 픽셀, 스케일링된 픽셀(scaled pixels), 메트릭(metric) 또는 임페리얼(imperial) 단위일 수 있다. 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)로 하여금 어플리케이션의 뷰포트(300)의 크기를 결정하거나 식별하도록 하는 명령을 포함할 수 있다. 예를 들어, 컨텐츠 추가 모듈(230)은 JavaScript 함수 "getViewportsize ()"를 호출하여 뷰포트(300)의 크기를 검색할 수 있다. 대안으로, 컨텐츠 추가 모듈(230)은 HTML 메타 태그 "viewport"를 사용하고 "device-height" 및 "devide-width" 값을 사용하여 뷰포트(300)의 크기를 식별할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 정보 자원(210)의 제1인라인 프레임(215A)의 크기를 뷰포트(300)의 크기보다 큰 크기로 설정하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 정보 자원(210)의 제1인라인 프레임(215A)의 높이를 뷰포트(300)의 높이보다 크거나 같게 설정하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 정보 자원(210)의 제1인라인 프레임(215A)의 폭을 뷰포트(300)의 폭보다 크거나 같게 설정하도록 하는 명령을 포함할 수 있다. 예를 들어, 뷰포트(300)의 크기가 1920×1080으로 식별된 경우, 컨텐츠 추가 모듈(230)은 제1인라인 프레임(215A)의 크기를 1920×1080으로 설정할 수 있다. 컨텐츠 추가 모듈(230)은 도 3A 내지 도 3F에 도시된 것처럼, 클라이언트 디바이스(125)가 나머지 인라인 프레임(215B-N)의 크기를 제1인라인 프레임(215A)과 동일한 크기로 설정하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125) 하여금 나머지 인라인 프레임(215B-N)의 크기를 제1인라인 프레임(215A)의 크기보다 크게 설정하도록 하는 명령을 포함할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)로 하여금 인라인 프레임(215A-N)에 내장될 컨텐츠 문서(220A-N)의 크기를 결정하거나 식별하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 컨텐츠 문서(220A-N)의 크기를 뷰포트(300)의 크기와 비교하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)은 컨텐츠 문서(220A-N)의 크기와 뷰포인트(300)의 크기 비교에 응답하여, 내장된 컨텐츠 문서(220A-N)를 갖는 각각의 인라인 프레임(215A-N)의 크기를 컨텐츠 문서(220A-N)의 크기로 설정할 수 있다. 예를 들어, 제2인라인 프레임(215B)에 내장될 컨텐츠 문서(220B)의 높이가 뷰포트(300)의 높이보다 작은 경우, 컨텐츠 추가 모듈(230)은 제2인라인 프레임(215B)의 높이를 컨텐츠 문서(220B)의 높이로 설정할 수 있다.
스크롤 감지 모듈(235)은 클라이언트 디바이스(125)로 하여금 어플리케이션(205) 상의 스크롤 이벤트를 모니터링하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 클라이언트 디바이스(125)로 하여금 스크롤 이벤트를 검출하거나 들을 수 있다. 스크롤 이벤트는 예를 들어 "onScroll" 또는 "onTouch"이벤트 핸들러 또는 리스너(listener)가 포함될 수 있다. 예를 들어, 클라이언트 디바이스(125)가 터치 디스플레이를 포함하는 경우, 스크롤 감지 모듈 (235)은 스크롤 이벤트로서 어플리케이션(205)상의 "온터치" 이벤트를 검출할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 스크롤 이벤트의 검출에 응답하여 클라이언트 디바이스(125)가 다른 명령을 실행하도록 하는 명령을 포함할 수 있다. 예를 들어, 스크롤 감지 모듈(235)은 "onScroll" 또는 "onTouch" 이벤트 리스너가 스크롤 이벤트를 검출할 때 함수를 호출할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 클라이언트 디바이스(125)가 스로틀링(throttling)에 의해 스크롤 이벤트를 처리하도록 하는 명령을 포함할 수 있다. 예를 들어, 하나의 클라이언트 디바이스(125)가 하나의 스크롤 이벤트를 수신하면, 스크롤 감지 모듈(235)은 기설정 시간 프레임이 경과할 때까지(예컨대, 4 내지 140ms) 클라이언트 디바이스(125)가 스크롤 이벤트를 처리하지 않도록 하는 명령을 포함할 수 있다.
스크롤 감지 모듈(235)은 제1인라인 프레임(215A)에 대한 스크롤 이벤트 검출에 응답하여, 클라이언트 디바이스(125)가 제1컨텐츠 문서(220A)의 제1컨텐츠 문서 단부와 뷰포트(300)의 제1뷰포트 단부사이의 제1오프셋이 제1임계값 보다 작거나 같은지 결정하도록 할 수 있다. 제1임계값은 픽셀, 스케일링된 픽셀, 메트릭 또는 임페리얼 단위로 측정될 수 있다. 제1임계값은 0부터 뷰포트(300)의 퍼센트 또는 비율에 기초한 임의의 수까지의 범위일 수 있다. 예를 들어, 제1임계값은 뷰포트(300)의 높이의 0% 내지 33%의 범위일 수 있다. 제1임계값은 고정되거나 가변될 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 스크롤 이벤트 검출에 응답하여 클라이언트 장치(125)가 제1컨텐츠 문서(220A)의 제1컨텐츠 문서 단부를 식별하거나 획득하도록 하는 명령을 포함할 수 있다. 제1컨텐츠 문서(220A)의 제1컨텐츠 문서 단부는 예를 들어, 제1컨텐츠 문서(220A)의 상측 또는 좌측 끝의 좌표 또는 위치일 수 있다. 예를 들어, 스크롤 감지 모듈(235)은 "<element>.offsetTop" 또는 "<element>.offsetLeft"의 JavaScript 속성을 호출하여 제1컨텐츠 문서(220A)의 상측 단부를 식별할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 스크롤 이벤트의 검출에 응답하여 클라이언트 디바이스(125)가 뷰포트(300)의 제1뷰포트 단부를 식별하거나 획득하도록 하는 명령을 포함할 수 있다. 제1뷰포트 단부는 예를 들어, 뷰포트(300)의 상측 또는 좌측 단부일 수 있다. 예를 들어, 스크롤 감지 모듈(235)은 "window.pageYOffset" 또는 "window.pageXOffset"의 JavaScript 속성을 호출하여 뷰포트(300)의 상측 또는 좌측 크기 좌표를 얻을 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 클라이언트 디바이스(125)가 제1컨텐츠 문서(220A)의 제1컨텐츠 문서 단부와 뷰포트(300)의 제1뷰포트 단부를 비교하도록 하는 명령을 포함할 수 있다. 스크롤 감지 모듈(235)은 디바이스(125)가 제1컨텐츠 문서 단부와 제1뷰포트 단부 사이의 차이 또는 오프셋을 계산 또는 결정하여 차이 또는 오프셋을 제1임계값과 비교하도록 할 수 있다.
스크롤 감지 모듈(235)은 제1인라인 프레임(215A)에 대한 스크롤 이벤트의 검출에 응답하여, 클라이언트 디바이스(125)가 제1컨텐츠 문서(220A)의 제2컨텐츠 문서 단부와 뷰포트(300)의 제2뷰포트 단부사이의 제2오프셋이 제임계값보다 크거나 동일한지 결정하도록 하는 명령을 포함할 수 있다. 제2임계값은 픽셀, 스케일링된 픽셀, 메트릭 또는 임페리얼 단위로 측정될 수 있다. 제2임계값은 0부터 뷰포트(300)의 퍼센트 또는 비율에 기초한 임의의 수까지의 범위 일 수 있다. 예를 들어, 제2임계값은 뷰포트(300)의 높이의 0% 내지 33%의 범위일 수 있다. 제2임계값은 고정되거나 가변될 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 스크롤 이벤트의 검출에 응답하여 클라이언트 디바이스(125)가 제2컨텐츠 문서(220A)의 제2컨텐츠 문서 단부를 식별하거나 획득하도록 하는 명령을 포함할 수 있다. 제1컨텐츠 문서(220A)의 제2컨텐츠 문서 단부는 예를 들어, 제1컨텐츠 문서(220A)의 하부 또는 우측 단부의 좌표 또는 위치일 수 있다.
예를 들어, 스크롤 감지 모듈(235)은 제1컨텐츠 문서(220A)의 상측 단부를 식별하기 위해 "<element>.offsetTop"의 JavaScript 속성과 제1컨텐츠 문서(220A)의 높이 또는 "<element>.offsetLeft"를 호출할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 스크롤 이벤트의 검출에 응답하여, 클라이언트 디바이스(125)가 뷰포트(300)의 제2뷰포트 단부를 식별하거나 획득하도록 하는 명령을 포함할 수 있다. 제1뷰포트 단부는 예를 들어, 뷰포트(300)의 하측 또는 우측 단부일 수 있다. 예를 들어, 스크롤 감지 모듈(235)은 "window.pageYOffset"의 자바 스크립트 속성과 뷰포트 높이 또는 "window.pageXOffset"과 뷰포트 폭을 호출하여 뷰포트(300)의 하부 또는 우측 단부 좌표를 획득할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)은 클라이언트 디바이스(125)가 제1컨텐츠 문서(220A)의 제2 컨텐츠 문서 단부와 뷰포트(300)의 제2뷰포트 단부를 비교하도록 하는 명령을 포함할 수 있다. 스크롤 감지 모듈(235)은 클라이언트 디바이스(125)가 제2컨텐츠 단부와 제2뷰포트 단부사이의 차이 또는 오프셋을 계산하거나 결정하고 차이 또는 오프셋을 제2임계값과 비교하도록 하는 명령을 포함할 수 있다.
일부 구현예에서, 스크롤 감지 모듈(235)과 연동하는 컨텐츠 추가 모듈(230)은 제1오프셋 중 적어도 하나가 제1오프셋보다 작거나 같지 않다는 결정 및 제2오프셋이 제2오프셋보다 크거나 같지 않다는 결정에 응답하여, 클라이언트 디바이스(125)가 정보 자원 페이지에서 제2인라인 프레임(215B)를 추가하도록 하는 명령을 포함할 수 있다. 제2인라인 프레임(215B)은 적어도 제2컨텐츠 문서(220B)를 내장할 수 있다. 제2컨텐츠 문서(220B)는 제1컨텐츠 문서(220A) 또는 정보 자원 페이지(210)의 소스와 상이한 제3자 소스로부터의 것일 수 있다. 예를 들어, 제1오프셋이 제1임계값보다 작거나 같지 않고 제2오프셋은 제임계 값보다 크거나 같지 않다고 결정되면, 스크롤 감지 모듈(235)은 컨텐츠 추가 모듈(230)의 명령을 호출할 수 있다. 컨텐츠 추가 모듈(230)은 차례로 추가 컨텐츠를 요청할 수 있고, 수신된 추가 컨텐츠를 제2컨텐츠 문서(220B)로서 제2인라인 프레임(215B)에 내장할 수 있다.
일부 구현예에서, 스크롤 감지 모듈(235)과 연동하는 컨텐츠 추가 모듈(230)은 정보 자원 페이지의 스크롤 위치가 정보 자원 페이지 크기의 소정의 임계 비율 또는 퍼센트 이내인 것으로 결정한 것에 응답하여 클라이언트 디바이스(125)가 추가하도록 하는 명령을 포함할 수 있다. 예를 들어, 스크롤 위치가 정보 자원 페이지 높이의 75% 내지 95% 사이인 경우, 컨텐츠 추가 모듈(230)은 제2인라인 프레임 (215B)을 정보 자원 페이지(210)에 추가하고, 추가 컨텐츠에 대한 요청을 전송하며, 수신된 컨텐츠 문서(220B)를 제2인라인 프레임(215)에 내장한다. 스크롤 감지 모듈(235)과 연동하는 컨텐츠 추가 모듈(230)은 클라이언트 디바이스(125)가 하나 이상의 인라인 프레임(215C-N)에 대해 이 기능을 반복적 및 동적으로 수행하도록 하는 명령을 포함할 수 있다.
스크롤 할당 모듈(240)은 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여, 클라이언트 디바이스(125)가 스크롤 이벤트를 제1인라인 프레임(215A)에 할당하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 할당 모듈(240)은 클라이언트 디바이스(125)가 정보 자원(210)에 스크롤 이벤트를 초기에 설정하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 할당 모듈(240)은 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여, 클라이언트 디바이스(125)가 제1인라인 프레임(215A)에 스크롤 이벤트를 할당하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 할당 모듈(240)은 클라이언트 디바이스(125)가 제1인라인 프레임(215A)의 스크롤 가능 속성을 스크롤 가능하게 할당하도록 하는 명령을 포함할 수 있다. 예를 들어, 제1오프셋이 0(greater zero)이고 제2오프셋이 0보다 큰 것으로 결정되면, 스크롤 할당 모듈(240)은 제1인라인 프레임(215A)의 스크롤 가능 속성을 참으로 설정하여, 제1인라인 프레임(215A)에 내장된 제1컨텐츠 문서(220A)가 스크롤되도록 한다. 스크롤 할당 모듈(240)은 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여, 클라이언트 디바이스(125)가 정보 자원 페이지(210)에 스크롤 이벤트를 할당하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 할당 모듈(240)은 클라이언트 디바이스(125)가 제1인라인 프레임(215A)에 스크롤 이벤트를 초기 설정하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 할당 모듈(240)은 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여, 클라이언트 디바이스(125)가 정보 자원 페이지(210)에 스크롤 이벤트를 할당하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 할당 모듈(240)은 클라이언트 디바이스(125)가 정보 자원 페이지(210)의 스크롤 가능 속성을 스크롤 가능하게 할당하도록 하는 명령을 포함할 수 있다. 예를 들어, 제1오프셋이 0보다 크고 제2오프셋이 0보다 작은 것으로 결정되면, 스크롤 할당 모듈(240)은 정보 자원 페이지(210)의 스크롤 가능 속성을 참으로 설정하여, 정보 자원 페이지(210)의 전체가 어플리케이션(205)의 스크롤 위치와 함께 이동하도록 한다.
일부 구현예에서, 컨텐츠 추가 모듈(230)과 연동하는 스크롤 할당 모듈(240)은 제2 컨텐츠 문서(220B)의 크기가 뷰포트(300)의 크기보다 작다는 결정에 응답하여, 클라이언트 디바이스(125)가 정보 자원 페이지에 스크롤 이벤트를 할당하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 컨텐츠 추가 모듈(230)과 연동하는스크롤 할당 모듈(240)은 클라이언트 디바이스(125)가 제2인라인 프레임(215B)의 스크롤 가능 속성을 스크롤 가능하게 할당하지 않도록 하는 명령을 포함할 수 있다. 예를 들어, 제2인라인 프레임(215B)에 내장된 제2 컨텐츠 문서(220B)의 높이 및 폭이 1240×500이고 뷰포트(300)의 높이 및 폭이 1240×720인 경우, 스크롤 할당 모듈(240)은 시각적으로 스크롤이 제2인라인 프레임(215B) 상에 있고 제2인라인 프레임(215B)의 전체가 완전히 뷰포트(300)의 뷰내에 모두 있더라도 스크롤 이벤트를 정보 자원 페이지(210)에 할당할 수 있다.
일부 구현예에서, 컨텐츠 추가 모듈(230)과 연동하는 스크롤 감지 모듈(235) 및 스크롤 할당 모듈(240)은 보조 컨텐츠 추가물을 갖지하는 것에 응답하여, 클라이언트 디바이스(125)가 제1오프셋이 제1임계값보다 작거나 같은지 및 제2오프셋이 제2임계값보다 크거나 같은지 결정하도록 하는 명령을 포함할 수 있다. 예를 들어, 추가 컨텐츠가 제1인라인 프레임(215A)에 내장된 제1컨텐츠 문서(220A)에 추가되었다고 결정한 경우, 스크롤 감지 모듈(235)은 제1오프셋은 0보다 작거나 같고 제2오프셋은 200픽셀보다 크거나 같다고 결정할 수 있다. 차례로, 스크롤 할당 모듈(240)은 결정에 기초하여 스크롤 이벤트를 제1인라인 프레임(215A) 또는 정보 자원 페이지(210)에 할당할 수 있다.
스크롤 감지 모듈(235) 및 스크롤 할당 모듈(240)은 클라이언트 디바이스(125)가 동일하거나 상이한 임계값을 사용하여 제1인라인 프레임(215A) 이외의 각 인라인 프레임(215B-N)에 대한 오프셋을 결정하여, 그에 따라 도 3C-F에 도시된 것처럼 스크롤 이벤트를 할당하도록 하는 명령을 포함할 수 있다는 것을 이해해야 한다. 예를 들어, 스크롤 감지 모듈(235)은 제2 인라인 프레임에 대한 스크롤 이벤트의 검출에 응답하여, 클라이언트 디바이스(125)가 제2컨텐츠 문서(220B)의 제1컨텐츠 문서 단부와 뷰포트(300)의 제1뷰포트 단부사이의 제3오프셋이 제3임계값보다 작거나 같은지 결정하도록 하는 명령을 포함할 수 있다. 스크롤 감지 모듈(235)은 또한 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대한 스크롤 이벤트의 검출에 응답하여, 클라이언트 디바이스(125)가 제2컨텐츠 문서(220B)의 제2컨텐츠 문서 단부와 뷰포트(300)의 제2뷰포트 단부 사이의 제4오프셋이 제4임계값보다 크거나 같은지 결정하도록 하는 명령을 포함할 수 있다.
스크롤 할당 모듈(240)은 제3오프셋이 제3임계 값보다 작거나 같다는 경정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정에 응답하여, 클라이언트 디바이스(125)가 제2인라인 프레임(215B)에 스크롤 이벤트를 할당하도록 하는 명령을 포함할 수 있다. 이러한 기능은 그 다음의 인라인 프레임(215C-N)에 대하여 반복될 수 있다.
일부 구현예에서, 스크롤 감지 모듈은 제3오프셋이 제3임계값보다 작거나 다는 결정 및 제4오프셋이 제4임계값보다 크거나 같다는 결정의 적어도 하나에 응답하여, 클라이언트 디바이스(125)가 어플리케이션의 스크롤 이벤트를 모니터하도록 하는 명령을 포함할 수 있다. 일부 구현예에서, 스크롤 감지 모듈(235)과 스크롤 할당 모듈(240)은 스크롤 이벤트로 인한 최종 인라인 프레임(215A-N)에 대하여 각각의 컨텐츠 문서(220A-N)의 컨텐츠 문서 단부와 뷰포트(300)의 뷰포트 단부사이의 오프셋을 결정할 수 있다. 예를 들어, 스크롤 이벤트로 인한 최종 인라인 프레임(215A-N)이 제2인라인 프레임(215B)인 경우, 스크롤 감지 모듈(235)은 클라이언트 디바이스(125)가 제2인라인 프레임(215B)에 대한 오프셋을 결정하도록 하는 명령을 포함할 수 있다.
일부 구현예에서, 무한 스크롤 할당 스크립트(225)의 컨텐츠 추가 모듈(230)은 다음 의사 코드를 사용하여 구현될 수 있다 :
01 embed_doc (new_content_doc, j) {
02 if (new_content_doc.size> = viewport.size)
03 instantiate (iFrame [j], new_content_doc,
viewport.size + epsilon)
04 else
05 instantiate(iFrame[j],new_content_doc,
new_content_doc.size)} }
일부 구현예에서, 무한 스크롤 할당 스크립트(225)의 스크롤 감지 모듈 (235) 및 스크롤 할당 모듈(240)은 다음 의사 코드를 사용하여 구현될 수 있다
01 onScroll () {
02 for (iFrame [0 : i :N] )
03 if (iFrame [i]. content doc. top-viewport. top <= 0 && iFrame [i] .content doc. bottom-viewport.bottom >= 0)
04 iFrame [i].scrollable (true)
05 else
06 iFrame [i].scrollable (false)
07 if (is_above_fold(iFrame [N-2 : k : N].content_doc))
08 embed_doc (getNewContent (), k + 1)}
09
10 is_above_fold (curFrame) {
11 return (curFrame.top <= 0 || curFrame.top <= top_epsilon || curFrame.bottom <= bottom_epsilon)}
도 2와 관련하여 기술된 무한 스크롤 할당 시스템(200)의 컨텍스트에서 3A-3F를 다시 참조하면, 컨텐츠 추가 모듈(230)은 3개의 인라인 프레임(215A-C)의 높이를 각각 뷰포트(300)의 높이보다 크게 설정하고 3개의 인라인 프레임(215A-C)의 폭은 뷰포트(300)의 폭으로 각각 설정할 수 있다. 도 3A-3F에 도시된 바와 같이, 3개의 인라인 프레임(215A-C) 각각은 동일한 높이 및 폭으로 설정될 수 있다. 도 3A에서, 컨텐츠 추가 모듈(230)은 제1컨텐츠 문서(220A)를 제1인라인 프레임(215A)에 내장시키고, 제2컨텐츠 문서(220B)는 제2인라인 프레임(215B)에 내장시킬 수 있다. 스크롤 할당 모듈(240)은 초기에 스크롤 이벤트의 할당을 제1인라인 프레임(215A)에 설정할 수 있다. 컨텐츠 삽입 모듈(230)은 제3컨텐츠 문서(220C)를 내장하지 않고 제3인라인 프레임(215C)을 정보 자원(210)에 추가하면서 제3인라인 프레임 (215C)을 인스턴스화할 수 있다.
도 3B를 참조하면, 도 3B는 도 3A의 스크롤 위치보다 낮은 스크롤 위치에 있는 컨텐츠 문서(220A)를 도시한다. 도 3A처럼, 도 3B에서, 스크롤 할당 모듈 (240)이 스크롤 이벤트의 할당을 제1인라인 프레임(215)에 설정하여, 컨텐츠 문서 (220A)가 인라인 프레임(215) 내에서 스크롤 가능하게 되었기 때문에 정보 자원 (210)의 스크롤 위치는 변경되지 않는다. 스크롤 감지 모듈(235)은 이벤트 핸들러 또는 리스너를 사용하여 어플리케이션(205)상의 스크롤 이벤트를 간헐적으로 모니터링할 수 있다. 스크롤 검출(230)은 이들 검출 중 적어도 일부에 대해, 제1컨텐츠 문서(220A)의 상단과 뷰포트(300)의 상단 사이의 오프셋이 0보다 크고 제1컨텐츠 문서(220A)의 하단과 뷰포트(300)의 하단이 0보다 작은지 결정할 수 있다.
도 3C를 참조하면, 도 3C는 도 3A 및 도 3B의 스크롤 위치보다 낮은 스크롤 위치에 있는 정보 자원(205)을 도시한다. 도 3C에서, 제1컨텐츠 문서(220A)의 하 단(bottom end)이 제1인라인 프레임(215A)의 하단을 향해 이동됨에 따라, 스크롤 감지 모듈(235)은 제1 컨텐츠 문서(220A)의 상단(top end)과 뷰포인트(300)의 상단사이의 오프셋이 0보다 크고 제1컨텐츠 문서(220A)의 하단과 뷰포인트(300)의 하단이 0보다 작은 것으로 결정할 수 있다. 이들 비교에 기초하여, 스크롤 할당 모듈(240)은 스크롤 이벤트를 제1인라인 프레임(215A) 대신에 정보 자원 페이지(210)에 할당할 수 있고, 이에 따라 정보 자원 페이지(210)가 스크롤 업되도록 할 수 있다. 더욱이, 제2컨텐츠 문서(220B)가 내장된 제2인라인 프레임(215B)의 상단은 뷰포트(300)의 범위 또는 뷰로 이동할 수 있다. 스크롤 이벤트가 제2인라인 프레임(215B)에 할당되지 않았기 때문에 내장된 제2컨텐츠 문서(220B)의 스크롤 위치는 이동되지 않는다.
도 3D를 참조하면, 도 3D는 도 3C보다 낮은 스크롤 위치에 있는 스크롤 이벤트가 할당된 제2인라인 프레임(215B)를 도시한다. 스크롤 감지 모듈(235)은 제2컨텐츠 문서(220B)의 상단과 뷰포트(300)의 상단 사이의 오프셋이 0보다 작거나 같고 제2컨텐츠 문서(220B)의 하단과 뷰포트(300)의 하단이 0보다 크거나 같은 것으로 결정할 수 있다. 이들 비교에 기초하여, 스크롤 할당 모듈(240)은 제2인라인 프레임(215B)에 스크롤 이벤트를 할당하여, 제2인라인 프레임(215B)에 내장된 제2컨텐츠 문서(220B)가 스크롤되도록 한다.
도 3E를 참조하면, 도 3E는 도 3A 내지 3D의 스크롤 위치보다 낮은 스크롤 위치에 있는 정보 자원(205)을 도시한다. 도 3E에서, 제2 컨텐츠 문서(220B)의 하단이 제2인라인 프레임(215B)의 하단을 향하여 이동함에 따라, 스크롤 감지 모듈(235)은 다시 제2컨텐츠 문서(220B)의 상단과 뷰포인트(300)의 상단사이의 오프셋이 0보다 크고 제2컨텐츠 문서(220B)의 하단과 뷰포인트(300)의 하단이 0보다 작은 것으로 결정할 수 있다. 이들 비교에 기초하여, 스크롤 할당 모듈(240)은 제1 또는 제2인라인 프레임(215A 또는 215B) 대신에 정보 자원 페이지(210)에 스크롤 이벤트를 할당하며, 이에 따라 정보 자원 페이지(210)가 위로 스크롤되도록 한다. 또한, 컨텐츠 추가 모듈(230)은 제3인라인 프레임(215C)에 내장하기 위한 추가 컨텐츠를 요청할 수 있으며, 제3컨텐츠 문서(220C)로서 추가 컨텐츠를 제3인라인 프레임(215C)에 내장할 수 있다. 시각적으로, 제2인라인 프레임(215B)은 뷰포트(300)의 뷰를 완전히 벗어나 있지 않으므로, 제2컨텐츠 문서(220B)와 제3컨텐츠 문서(220C)의 일부는 뷰포트(300)를 통해 보일 수 있다.
도 3F를 참조하면, 도 3F는 도 3E의 스크롤 위치보다 낮은 스크롤 위치에 있는 제3컨텐츠 문서(220C)를 도시한다. 도 3F에서, 스크롤 감지 모듈(235)은 제3컨텐츠 문서(220C)의 상단과 뷰포인트(300)의 상단사이의 오프셋이 0보다 작거나 같고 제3컨텐츠 문서(220C)의 하단과 뷰포인트 (300)의 하단이 0보다 크거나 같은 것으로 결정할 수 있다. 이들 비교에 기초하여, 스크롤 할당 모듈(240)은 제3인라인 프레임(215C)에 스크롤 이벤트를 할당하여, 제3인라인 프레임(215C)에 내장된 제3컨텐츠 문서(220C)가 스크롤되도록 한다. 컨텐츠 추가 모듈(230)은 각각의 인라인 프레임(215D)에 내장하기 위한 컨텐츠 문서(220D-N)로서 정보 자원 페이지(210)에 추가할 추가 컨텐츠를 요청할 수 있다.
도 3A 내지 도 3F와 관련하여 기술된 무한 스크롤 할당 시스템(200)의 기능은 스크롤 위치의 역순으로 수행될 수 있음을 이해해야 한다. 예를 들어, 도 3F 내지 도 3E를 참조하면, 어플리케이션(205)의 스크롤 위치가 위로 이동함에 따라, 제3컨텐츠 문서(220C)의 상단과 뷰포트(300)의 상단 사이의 오프셋이 0보다 크고 제3컨텐츠 문서(220C)의 하단과 뷰포트(300)의 하단이 0보다 작은지 결정할 수 있다. 스크롤 감지 모듈(235)은 또한 제2컨텐츠 문서(220B)의 상단과 뷰포트(300)의 상단 사이의 오프셋이 0보다 크고 제2컨텐츠 문서(220B)의 하단과 뷰포트(300)의 하단이 0보다 작은지 결정할 수 있다. 이들 비교에 기초하여, 스크롤 할당 모듈(240)은 스크롤 이벤트를 정보 자원(210)에 할당하여 전체 정보 자원(210)이 스크롤되도록 할 수 있다. 도 3A 내지 도 3F와 관련하여 기술된 무한한 스크롤 구현 시스템(200)의 기능은 임의의 방향 또는 축으로 스크롤 축에서 수행될 수 있음을 이해해야 한다. 예를 들어, 어플리케이션(205)의 스크롤 축을 수직으로 하는 대신에 스크롤 축은 수평일 수 있다. 또한, 인라인 프레임(215A-C)은 정보 자원(210)에 수평으로 추가될 수 있으며 길이가 수평일 수 있는 컨텐츠 문서(220A-C)가 내장될 수 있다. 이 예에서, 스크롤 감지 모듈(235)은 컨텐츠 문서(220A-C)의 좌측 및 우측 단부와 뷰포트(300)의 좌측 및 우측 단부를 사용하여 오프셋을 계산할 수 있고 스크롤 이벤트를 각각의 인라인 프레임(215A-C) 또는 정보 자원 페이지(210)에 할당할 수 있다.
도 4를 참조하면, 도 4는 어플리케이션상에서 스크롤 이벤트를 할당하는 방법(400)을 나타내는 흐름도이다. 방법(400)에 대하여 본 명세서에서 설명된 기능은 도 1에 도시된 데이터 처리 시스템(110) 또는 클라이언트 디바이스(125) 또는 도 2에 도시된 컨텐츠 디스플레이 관리 시스템(200), 또는 그들의 임의의 조합에 의해 수행되거나 실행될 수 있다. 예를 들어, 도 4는 데이터 처리 시스템(110)과 클라이언트 디바이스(125) 사이에 분산된 방법(400)의 기능을 도시한다. 간략히 요약하면, 클라이언트 디바이스는 데이터 처리 시스템으로 컨텐츠 요청을 전송할 수 있다(블록 405). 데이터 처리 시스템은 클라이언트 디바이스로부터 컨텐츠 요청을 수신할 수 있다(블록 410). 데이터 처리 시스템은 무한 스크롤 할당 스크립트를 갖는 컨텐츠를 클라이언트 디바이스로 전송할 수 있다(블록 415). 클라이언트 디바이스는 데이터 처리 시스템으로부터 무한 스크롤 할당 스크립트를 갖는 컨텐츠를 수신할 수 있다(블록 420). 클라이언트 디바이스는 인라인 프레임의 크기를 뷰포트의 크기로 설정할 수 있다(블록 425). 클라이언트 디바이스는 스크롤 이벤트를 검출할 수 있다(블록 430). 클라이언트 디바이스는 컨텐츠 문서의 제1단부와 뷰포트의 제1단부 사이의 제1오프셋이 제1임계값보다 작거나 같은지 여부를 결정할 수 있다(블록 435). 클라이언트 디바이스는 컨텐츠 문서의 제2단부와 뷰포트의 제단부 사이의 제2오프셋이 제2임계값보다 크거나 같은지 여부를 결정할 수 있다(블록 440). 만약 제1오프셋이 제1임계값보다 작거나 같고 제2오프셋이 제2임계값보다 크거나 같은 경우, 클라이언트 디바이스는 스크롤 이벤트를 인라인 프레임에 할당할 수 있다(블록 445). 만약 제1오프셋이 제1임계값보다 작거나 같지 않고 제2오프셋이 제2임계값보다 크거나 같지 않으면, 클라이언트 디바이스는 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다(블록 450). 클라이언트 디바이스는 추가 컨텐츠에 대한 요청을 데이터 처리 시스템으로 전송할 수 있다(블록 455). 데이터 처리 시스템은 클라이언트 디바이스로부터 추가 컨텐츠 요청을 수신할 수 있다(블록 460). 데이터 처리 시스템은 추가 컨텐츠를 클라이언트 디바이스로 전송할 수 있다(블록 465). 클라이언트 디바이스는 데이터 처리 시스템으로부터 추가 컨텐츠를 수신할 수 있다(블록 470).
보다 상세하게, 클라이언트 디바이스는 컨텐츠의 요청을 데이터 처리 시스템으로 전송할 수 있다(블록 405). 컨텐츠 요청은 하나 이상의 인라인 프레임 (예컨대, 웹 페이지 또는 어플리케이션의 페이지), 컨텐츠 아이템의 요청, 또는 정보 자원 페이지의 인라인 프레임 중 하나에 내장될 컨텐츠 문서의 요청을 포함하는 정보 자원 페이지의 요청을 포함할 수 있다. 컨텐츠 요청은 디바이스 유형 및 무한 스크롤 할당 스크립트의 요청을 나타내는 인디케이터를 식별할 수 있다. 클라이언트 디바이스에 대한 디바이스의 유형은 예를 들어 데스크탑 컴퓨터, 랩톱 컴퓨터, 모바일 폰, 스마트 폰 및 태블릿 등을 포함할 수 있다.
데이터 처리 시스템은 클라이언트 디바이스로부터 컨텐츠 요청을 수신할 수 있다(블록 410). 컨텐츠 요청은 하나 이상의 인라인 프레임(예컨대, 웹 페이지 또는 어플리케이션의 페이지), 컨텐츠 아이템의 요청 또는 정보 자원 페이지의 인라인 프레임 중 하나에 내장될 컨텐츠 문서의 요청을 포함하는 정보 자원 페이지의 요청을 포함할 수 있다. 예를 들어, 컨텐츠 요청은 웹 페이지 (예컨대, "https:// www.example.com/homepage.html")와 같은 특정 자원을 나타내는 URL (Uniform Resource Locator)을 포함할 수 있다. 컨텐츠 문서 요청의 URL에는 정보 자원의 URL과 다른 호스트 페이지가 포함될 수 있다. 예를 들어, 정보 자원 페이지의 URL은 "https://www.example_host.com/index.html"일 수 있지만 컨텐츠 문서의 URL은 "https://www.example_thirdparty.com/article1"일 수 있다.
일부 구현예에서, 데이터 처리 시스템은 무한 스크롤 할당 스크립트의 요청을 나타내는 인디케이터를 포함할 수 있는 정보 자원 페이지의 요청을 수신할 수 있다. 예를 들어, 정보 자원 페이지의 요청은 정보 자원 페이지와 함께 무한 스크롤 할당 스크립트를 클라이언트 디바이스로 전송하기 위해 데이터 처리 시스템을 지정하는 인디케이터를 포함하는 헤더를 포함할 수 있다. 일부 구현예에서, 데이터 처리 시스템은 다른 인라인 프레임에 내장하기 위해 컨텐츠 문서의 요청을 연속적으로 및 반복적으로 수신할 수 있다. 일부 구현예에서, 정보 자원 페이지는 정보 자원 페이지에 대한 스크립트에 삽입된 무한 스크롤 할당 스크립트를 포함할 수 있다. 일부 구현예에서, 정보 자원 페이지는 정보 자원 페이지에 삽입하기 위한 무한 스크롤 할당 스크립트를 검색하기 위한 스크립트를 포함할 수 있다.
데이터 처리 시스템은 클라이언트 디바이스로 전송할 컨텐츠를 결정할 수 있다. 데이터 처리 시스템은 정보 자원 페이지, 컨텐츠 문서 및 컨텐츠 요청에 포함된 컨텐츠 아이템에 대한 어드레스 또는 식별자를 식별할 수 있다. 데이터 처리 시스템은 데이터베이스에 액세스하여 정보 자원 페이지, 컨텐츠 문서 또는 어드레스 또는 식별자에 의해 식별된 컨텐츠 아이템을 선택할 수 있다. 데이터 처리 시스템은 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 액세스, 검색 또는 수신하기 위해 컨텐츠 제공자 또는 컨텐츠 발행자에게 요청을 전송할 수 있다. 데이터 처리 시스템은 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 클라이언트 디바이스로 전송하거나 포워딩할 수 있다. 예를 들어, 데이터 처리 시스템은 클라이언트 디바이스로부터 정보 자원 페이지의 인라인 프레임에 내장하기 위한 컨텐츠 문서에 대한 요청을 수신할 수 있다. 요청은 컨텐츠 발행자(120) 중 하나를 나타내는 어드레스를 포함할 수 있다.이 예에서, 데이터 처리 시스템은 컨텐츠 문서의 요청을 각각의 컨텐츠 발행자에게 전송할 수 있다. 각각의 컨텐츠 발행자로부터 컨텐츠 문서를 수신하면, 데이터 처리 시스템은 원래 요청을 한 클라이언트 디바이스로 컨텐츠 문서를 포워딩할 수 있다.
일부 구현예에서, 데이터 처리 시스템은 요청의 유형을 식별할 수 있다. 일부 구현예에서, 데이터 처리 시스템은 클라이언트 디바이스로부터 수신된 컨텐츠 요청에 기초하여 무한 스크롤 할당 스크립트를 송신할지 여부를 결정할 수 있다. 데이터 처리 시스템은 요청의 유형이 무한대 스크롤 할당 스크립트를 전송하기에 적합한 요청인지 결정할 수 있다. 예를 들어, 데이터 처리 시스템은 클라이언트 디바이스에 의해 이미 수신되었거나 클라이언트 디바이스로 전송될 정보 자원 페이지가 무한 스크롤링 성능을 갖는지 결정할 수 있다. 이 예에서, 만약 정보 자원 페이지가 이미 무한 스크롤링을 지정하면, 데이터 처리 시스템은 무한 스크롤 할당 스크립트를 전송할 수 있다. 일부 구현예에서, 데이터 처리 시스템은 광고 경매에 기초하여 디스플레이할 컨텐츠를 선택할 수 있는 광고 경매 시스템으로부터 컨텐츠 문서 또는 컨텐츠 아이템을 수신할 수 있다. 광고 경매 시스템은 입찰가, 광고의 크기, 클릭률(CTR), 비용 당 마일(CPM) 및 노출율과 같은 광고 경매 파라미터에 기초하여 복수의 광고로부터 하나의 광고를 선택할 수 있다.
데이터 처리 시스템은 무한 스크롤 할당 스크립트를 갖는 컨텐츠를 클라이언트 디바이스로 전송할 수 있다(블록 415). 클라이언트 디바이스는 데이터 처리 시스템으로부터 무한 스크롤 할당 스크립트를 갖는 컨텐츠를 수신할 수 있다(블록 420). 클라이언트 디바이스에 전송된 컨텐츠는 적어도 정보 자원 페이지와 무한 스크롤 할당 스크립트를 포함할 수 있다. 일부 구현예에서, 정보 자원 페이지는 각각 적어도 하나의 컨텐츠 문가가 내장된 하나 이상의 인라인 프레임을 포함하거나 포함하도록 구성될 수 있다. 무한 스크롤 할당 스크립트는 컴퓨터 실행 가능 명령을 포함할 수 있다. 컴퓨터 실행 가능한 명령은 HTML(HyperText Markup Language), XHTML(Extensible HyperText Markup Language), XML(Extensible Markup Language), CSS(Cascading Style Sheets) 및 JavaScript 등과 같은 스크립트를 포함할 수 있다. 컴퓨터 실행 가능 명령은 클라이언트 디바이스의 어플리케이션, 예를 들어 클라이언트 디바이스가 데이터 처리 시스템에 의해 수신된 컨텐츠 요청을 전송하도록 하는 어플리케이션에 의해 실행될 수 있다. 어플리케이션은 예를 들어, 인터넷 브라우저, 모바일 어플리케이션, 또는 컴퓨터 실행 가능 명령을 판독하고 실행할 수 있는 임의의 다른 컴퓨터 프로그램을 포함할 수 있다. 간략히 요약하면, 클라이언트 디바이스의 프로세서에 의해 실행될 때, 컴퓨터 실행 가능 명령은 클라이언트 디바이스의 어플리케이션으로 하여금 (a) 정보 자원 페이지의 제1인라인 프레임의 크기를 정보 자원 페이지가 표시되는 어플리케이션의 뷰포트의 크기로 설정하고, (b) 어플리케이션의 스크롤 이벤트를 모니터하고, (c) 스크롤 이벤트 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값보다 작거나 같은지 결정하고, (d) 스크롤 이벤트 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제2오프셋이 제2임계값보다 크거나 같은지 결정하며, (e) 제1오프셋이 제1임계값보다 작거나 같다는 결정 및 제2오프셋이 제2임계값보다 크거나 같다는 결정에 응답하여, 스크롤 이벤트를 제1인라인 프레임에 할당하며, 및 (f) 제1오프셋의 적어도 하나가 제1임계값보다 작거나 같지 않다는 결정 및 제2오프셋이 제2임계값보다 크거나 같지 않다는 결정에 응답하여, 스크롤 이벤트를 정보 자원 페이지에 할당하도록 할 수 있다.
어플리케이션은 컴퓨팅 디바이스의 하나 이상의 프로세서에 의해 구동되거나 실행될 수 있다. 어플리케이션은, 예를 들어 인터넷 브라우저, 모바일 어플리케이션, 또는 정보 자원 페이지에 포함된 컴퓨터 실행 가능 명령, 하나 이상의 인라인 프레임, 하나 이상의 컨텐츠 문서 및 무한 스크롤 할당 스크립트와 같은 컴퓨터 실행 가능 명령을 실행하거나 호출할 수 있는 임의의 다른 컨퓨터 프로그램을 포함할 수 있다. 정보 자원 페이지는 하나 이상의 인라인 프레임(예컨대, HTML5의 iframe)을 포함할 수 있다. 하나 이상의 인라인 프레임 각각은 적어도 하나의 컨텐츠 문서가 내장될 수 있다. 정보 자원 페이지는 무한 스크롤 할당 스크립트와 함께 어플리케이션에 의해 수신될 수 있다.
클라이언트 디바이스는 인라인 프레임의 크기를 뷰포트의 크기로 설정할 수 있다(블록 425). 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지의 제1인라인 프레임의 크기를 정보 자원 페이지가 디스플레이되고 있는 어플리케이션의 뷰포트의 크기에 대응하도록 설정할 수 있다. 어플리케이션의 뷰포트 크기는 픽셀, 스케일링된 픽셀, 메트릭 또는 임페리얼 단위 등으로 표시될 수 있다. 클라이언트 디바이스는 어플리케이션의 뷰포트 크기를 결정하거나 식별할 수 있다. 예를 들어, 클라이언트 디바이스는 JavaScript 함수 "getViewportsize()"를 호출하여 뷰포트의 크기를 검색할 수 있다. 대안으로, 클라이언트 디바이스는 HTML 메타 태그 "viewport"를 사용하고 "devide-height" 및 "device-width"값을 사용하여 뷰포트의 크기를 식별할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원의 제1인라인 프레임의 크기를 뷰포트의 크기보다 크게 설정할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원의 제1인라인 프레임의 높이를 뷰포트의 높이 보다 크거나 같게 설정할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원의 제1인라인 프레임의 폭을 뷰포트의 폭보다 크거나 같게 설정할 수 있다. 예를 들어 뷰포트의 크기가 1920×1080을 갖는 것으로 식별되면, 클라이언트 디바이스는 제1인라인 프레임의 크기를 1920×1300으로 설정할 수 있다. 클라이언트 디바이스는 나머지 인라인 프레임의 크기를 제1인라인 프레임과 동일한 크기로 설정할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 나머지 인라인 프레임의 크기를 제1인라인 프레임의 크기보다 큰 크기로 설정할 수 있다.
일부 구현예에서, 클라이언트 디바이스는 인라인 프레임에 내장될 컨텐츠 문서의 크기를 결정하거나 식별할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 컨텐츠 문서의 크기를 뷰포트의 크기와 비교할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 컨텐츠 문서의 크기와 뷰포트의 크기와 비교하는 것에 응답하여, 내장된 컨텐츠 문서를 갖는 각각의 인라인 프레임의 크기를 컨텐츠 문서의 크기로 설정할 수 있다. 예를 들어, 제2인라인 프레임에 내장될 컨텐츠 문서의 높이가 뷰포트의 높이보다 작은 경우, 클라이언트 디바이스는 제2인라인 프레임의 높이를 컨텐츠 문서의 높이로 설정할 수 있다.
일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지 상에 제1인라인 프레임을 인스턴스화하거나 부가하여 적어도 제1컨텐츠 문서를 제1인라인 프레임에 내장할 수 있다. 예를 들어 제1인라인 프레임을 추가하고 제1컨텐츠 문서를 제1인라인 프레임에 내장하기 위해, 클라이언트 디바이스는 HTML5 마크 업 "<iframe src ="https://example.com"></iframe>"을 정보 자원 페이지에 삽입할 수 있다. 다른 예에서, JavaScript를 사용하여 클라이언트 디바이스는 "document.createElement (<inline_frame>)"함수를 호출하여, 문서 개체 모델(DOM) 노드로서 제1인라인 프레임을 정보 자원 페이지의 DOM 트리에 인스턴스화하고 추가할 수 있다. 이 예에서, 클라이언트 디바이스는 "document.getElementbyID(<inline_frame>).src=" https://example.com "을 호출하여 제1컨텐츠 문서를 내장할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지상의 기존의 컨텐츠를 제1인라인 프레임에 내장할 수 있다. 예를 들어, 정보 자원 페이지가 임의의 인라인 프레임과 분리된, 텍스트 및 이미지를 갖는 주 컨텐츠를 포함하는 경우, 클라이언트 디바이스는 정보 자원 페이지로부터 기존의 주 컨텐츠를 이동시키고, 기존의 컨텐츠를 컨텐츠 문서로서 제1인라인 프레임에 내장하고, 정보 자원 페이지로부터 기존의 주 컨텐츠를 제거할 수 있다.
클라이언트 디바이스는 스크롤 이벤트를 검출할 수 있다(블록 430). 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트를 검출하거나 리슨(listen)할 수 있다. 스크롤 이벤트는 예를 들어 "onScroll"또는 "onTouch" 이벤트 핸들러 또는 리스너를 포함할 수 있다. 예를 들어, 클라이언트 디바이스가 터치 디스플레이를 포함하면, 클라이언트 디바이스는 스크롤 이벤트로서 어플리케이션상의 "온터치"이벤트를 검출할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트 검출에 응답하여 다른 명령을 실행하거나 구동할 수 있다. 예를 들어, 클라이언트 디바이스는 "onScroll"또는 "onTouch" 이벤트 리스너가 스크롤 이벤트를 감지할 때 함수를 호출할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 스로틀링에 의해 스크롤 이벤트를 처리할 수 있다. 예를 들어, 하나의 클라이언트 디바이스가 하나의 스크롤 이벤트를 수신하면, 클라이언트 디바이스는 소정의 시간 프레임(예컨대, 4 내지 140 ms)이 경과할 때까지 클라이언트 디바이스가 스크롤 이벤트를 처리하지 않도록 하는 명령을 포함할 수 있다.
클라이언트 디바이스는 컨텐츠 문서의 제1단부와 뷰포트의 제1단부 사이의 제1오프셋이 제1임계값 이하인지 여부를 결정할 수 있다(블록 435). 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값이하인지 결정할 수 있다. 제1임계값은 픽셀, 스케일링된 픽셀, 메트릭 또는 임페리얼 단위로 측정될 수 있다. 제1임계값은 뷰포트의 퍼센트 또는 비율에 기초하여 0부터 임의의 수까지의 범위 일 수 있다. 예를 들어, 제1임계값은 뷰포트의 높이의 0% 내지 33%의 범위 일 수 있다. 제1임계값은 고정되거나 가변될 수 있다. 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트 검출에 응답하여, 제1컨텐츠 문서의 제1컨텐츠 문서 단부를 식별하거나 획득할 수 있다. 제1컨텐츠 문서의 제1컨텐츠 단부는 예를 들어, 제1컨텐츠 문서의 상측 또는 좌측 단부 상의 좌표 또는 위치일 수 있다. 예를 들어, 클라이언트 디바이스는 "<element> .offsetTop" 또는 "<element> .offsetLeft"의 JavaScript 속성을 호출하여 제1컨텐츠 문서의 상측 단부를 식별할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트 검출에 응답하여, 뷰포트의 제1뷰포트 단부를 식별하거나 획득할 수 있다. 제1뷰포트 단부는, 예를 들어 뷰포트의 상측 단부 또는 좌측 단부일 수 있다. 예를 들어 클라이언트 디바이스는 "window.pageYOffset" 또는 "window.pageXOffset"의 JavaScript 속성을 호출하여 뷰포트의 상측 또는 좌측 크기 좌표를 얻을 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부를 비교할 수 있다. 클라이언트 디바이스는 제1컨텐츠 문서 단부와 제1뷰포트 단부 사이의 차이 또는 오프셋을 계산하거나 결정할 수 있고 차이 또는 오프셋을 제1임계값과 비교할 수 있다.
클라이언트 디바이스는 컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2단부 사이의 제2오프셋이 제2임계값 이상인지 결정할 수 있다(블록 440). 일부 구현예에서, 클라이언트 디바이스는 제1인라인 프레임에 대해, 스크롤 이벤트 검출에 응답하여, 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제2오프셋이 제2임계값 이상인지 결정할 수 있다. 제2임계값은 픽셀, 스케일링된 픽셀, 메트릭 또는 임페리얼 단위로 측정될 수 있다. 제2임계값은 뷰포트의 퍼센트 또는 비율에 기초하여 0부터 임의의 수까지의 범위일 수 있다. 예를 들어, 제2임계값은 뷰포트의 높이의 0% 내지 33%의 범위일 수 있다. 제2임계값은 고정되거나 가변될 수 있다. 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트의 검출에 응답하여, 제2컨텐츠 문서의 제2컨텐츠 문서 단부를 식별하거나 획득할 수 있다. 제1컨텐츠 문서의 제2컨텐츠 문서 단부는 예를 들어, 제1컨텐츠 문서의 하부 또는 우측 단부 상의 좌표 또는 위치일 수 있다. 예를 들어, 클라이언트 디바이스는 "<element>.offsetTop"의 자바 스크립트 속성과 제1컨텐츠 문서의 높이 또는 "<element>.offsetLeft"을 호출하여 제1컨텐츠 문서의 상측 단부를 식별할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 스크롤 이벤트의 검출에 응답하여, 뷰포트의 제2뷰포트 단부를 식별하거나 획득할 수 있다. 제1뷰포트 단부는 예를 들어 뷰포트의 하부 또는 우측 단부일 수 있다. 예를 들어, 클라이언트 디바이스는 "window.pageYOffset"의 자바 스크립트 속성과 뷰포트 높이 또는 "window.pageXOffset"와 뷰포트 폭을 호출하여 뷰포트의 하부 또는 우측 크기 좌표를 획득할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부를 비교할 수 있다. 클라이언트 디바이스는 제2컨텐츠 문서 단부와 제2뷰포트 단부 사이의 차이 또는 오프셋을 계산 또는 결정할 수 있고 차이 또는 오프셋을 제2임계값과 비교할 수 있다.
클라이언트 디바이스는 동일하거나 상이한 임계값을 사용하는 제1인라인 프레임 이외의 각 인라인 프레임에 대한 오프셋을 결정할 수 있고 이에 따라 스크롤 이벤트를 할당할 수 있음을 이해해야 한다. 예를 들어, 클라이언트 디바이스는 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제3오프셋이 제3임계값 이하인지 결정할 수 있다. 클라이언트 디바이스는 또한 클라이언트 디바이스로 하여금 스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제4오프셋이 제4임계값 이상인지 결정하도록 하는 명령을 포함할 수 있다. 클라이언트 디바이스는 제3오프셋이 제3임계값 이하라는 결정 및 제4오프셋이 제4임계값 이상이라는 결정에 응답하여, 스크롤 이벤트를 제2인라인 프레임에 할당할 수 있다. 이러한 기능은 후속 인라인 프레임을 위해 반복될 수 있다.
만약 제1오프셋은 제1임계값 이하이고 제2오프셋은 제2임계값 이상이면, 클라이언트 디바이스는 스크롤 이벤트를 인라인 프레임에 할당할 수 있다(블록 445). 일부 구현예에서, 클라이언트 디바이스는 제1오프셋이 제1임계값 이하라는 결정 및 제2오프셋이 제2임계값 이상이라는 결정에 응답하여, 스크롤 이벤트를 제1인라인 프레임에 할당할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 초기에 스크롤 이벤트를 정보 자원에 설정할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제1오프셋이 제1임계값 이하라는 결정 및 제2오프셋이 제2임계값 이상이라는 결정에 응답하여 스크롤 이벤트를 제1인라인 프레임에 할당할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제1인라인 프레임의 스크롤 가능 속성을 스크롤 가능 (scrollable)으로 할당할 수 있다. 예를 들어, 제1오프셋이 제로이고 제2오프셋이 0보다 큰 것으로 결정되면, 클라이언트 디바이스는 제1인라인 프레임의 스크롤 가능 속성을 참으로 설정하여, 제1인라인 프레임 내에 내장된 제1컨텐츠 문서가 스크롤될 수 있도록 한다.
만약, 제1오프셋이 제1임계값 이하가 아니고 제2오프셋이 제2임계값 이상이 아니면, 클라이언트 디바이스는 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다(블록 450). 일부 구현예에서, 클라이언트 디바이스는 제1오프셋의 적어도 하나가 제1임계값 이하가 아니라는 결정 및 제2오프셋이 제2임계값 이상이 아니라는 결정에 응답하여, 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 초기에 스크롤 이벤트를 제1인라인 프레임에 설정할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제1오프셋이 제1임계값 이하하는 결정 및 제2오프셋이 제2임계값 이상이라는 결정에 응답하여, 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지의 스크롤 가능 속성을 스크롤 가능하도록 할당할 수 있다. 예를 들어, 제1오프셋이 0보다 크고 제2오프셋이 0보다 작은 것으로 결정되면, 클라이언트 디바이스는 정보 자원 페이지의 스크롤 가능 속성을 참으로 설정하여, 정보 자원 페이지 전체가 어플리케이션의 스크롤 어ㅟ치를 따라 움직일 수 있도록 한다.
일부 구현예에서, 클라이언트 디바이스는 제2컨텐츠 문서의 크기가 뷰포트의 크기보다 작은지의 결정 응답하여 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제2인라인 프레임의 스크롤 가능 속성을 스크롤 가능하지 않게 할당할 수 있다. 예를 들어, 만약 제2인라인 프레임에 내장된 제2컨텐츠 문서의 높이와 폭이 1240×500이고 뷰포트의 높이와 폭이 1240× 720이면, 클라이언트 디바이스는 시각적으로 스크롤이 제2인라인 프레임상에 있고 제2인라인 프레임 전체가 뷰포트의 뷰내에 모두 있더라도, 스크롤 이벤트를 정보 자원 페이지에 할당할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 보조 컨텐츠 부가물을 검출하는 것에 응답하여, 제1오프셋이 제1임계값 이하라고 결정할 수 있고 제2오프셋이 제2임계값 이상이라고 결정할 수 있다. 예를 들어, 추가 컨텐츠가 제1인라인 프레임에 내장된 제1컨텐츠 문서에 추가되었다고 결정되면, 클라이언트 디바이스는 제1오프셋이 0 이하이고 제2오프셋이 200픽셀 이상인지를 결정할 수 있다. 결국, 클라이언트 디바이스는 결정에 기초하여 스크롤 이벤트를 제1인라인 프레임 또는 정보 자원 페이지에 할당할 수 있다.
클라이언트 디바이스는 추가 컨텐츠에 대한 요청을 전송할 수 있다(블록 455). 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는다는 결정에 응답하여, 추가 컨텐츠 요청을 전송할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 제1오프셋의 적어도 하나가 제1임계값 이하가 아니라는 결정 및 제2오프셋이 제2임계값이상이 아니라는 결정에 응답하여 추가 컨텐츠 요청을 전송할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지의 스크롤 위치가 정보 자원 페이지 크기의 사전 결정된 임계 분율 또는 퍼센트 내에 있다는 결정에 응답하여 추가 컨텐츠 요청을 전송할 수 있다. 예를 들어, 스크롤 위치가 정보 자원 페이지의 높이의 75% 내지 95% 사이인 경우, 클라이언트 디바이스는 추가 컨텐츠 요청을 전송할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 블록(420-450)과 독립적으로 또는 병렬로 추가 컨텐츠 요청을 전송할 수 있다.
데이터 처리 시스템은 추가 컨텐츠 요청을 수신할 수 있다(블록 (460)). 추가 컨텐츠 요청은 정보 자원 페이지의 인라인 프레임 중 하나에 내장될 컨텐츠 문서에 대한 요청을 포함할 수 있다. 컨텐츠 요청은 컨텐츠 문서에 대한 어드레스 또는 식별자를 포함할 수 있다. 데이터 처리 시스템은 추가 컨텐츠 요청에 포함된 컨텐츠 문서의 어드레스 또는 식별자를 식별할 수 있다. 데이터 처리 시스템은 데이터베이스에 액세스하여 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 선택할 수 있다. 데이터 처리 시스템은 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 액세스, 검색 또는 수신하기 위해 컨텐츠 제공자 또는 컨텐츠 발행자에게 요청을 전송할 수 있다. 데이터 처리 시스템은 추가 컨텐츠를 전송할 수 있다(블록 465). 일부 구현예에서, 데이터 처리 시스템은 어드레스 또는 식별자에 의해 식별된 컨텐츠 문서를 클라이언트 디바이스로 전송하거나 포워딩할 수 있다.
클라이언트 디바이스는 추가 컨텐츠를 수신할 수 있다(블록 470). 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지에 다른 또는 제2인라인 프레임을 추가할 수 있다. 제2인라인 프레임은 제2컨텐츠 문서가 내장될 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 가지고 않지 않는지를 결정할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임, 즉 제2인라인 프레임을 갖지 않는다는 결정에 응답하여, 제2인라인 프레임을 추가할 수 있다. 일부 구현예에서, 클라이언트 디바이스는 다른 컨텐츠 문서를 수신하는 것에 응답하여, 제2인라인 프레임을 정보 자원 페이지에 추가할 수 있다. 예를 들어, 만약 클라이언트 디바이스가 데이터 처리 시스템으로부터 다른 컨텐츠 문서를 수신하면, 클라이언트 디바이스는 정보 자원 페이지에서 다른 인라인 프레임을 인스턴스화하고 컨텐츠 문서를 각각의 인라인 프레임에 내장할 수 있다. 클라이언트 디바이스는 정보 자원에 제3인라인 프레임과 같은 하나 이상의 인라인 프레임을 반복적 및 동적으로 추가할 수 있다.
몇몇 구현예에서, 클라이언트 디바이스는 제1오프셋의 적어도 하나가 제1임계값 이하가 아니라는 결정 및 제2오프셋이 제1임계값 이상이 아니라는 결정에 응답하여, 정보 자원 페이지에서 제2인라인 프레임을 추가할 수 있다. 제2인라인 프레임은 적어도 제2컨텐츠 문서가 내잘될 수 있다. 예를 들어, 제1오프셋이 제1임계값 이하가 아니고 제2오프셋이 제2임계값 이상이 아니라고 결정되면, 클라이언트 디바이스는 클라이언트 디바이스의 명령을 호출할 수 있다. 클라이언트 디바이스는 차례로 추가 컨텐츠를 요청할 수 있고 수신된 추가 컨텐츠를 제2컨텐츠 문서로서 제2인라인 프레임에 내장시킬 수 있다. 클라이언트 디바이스는 이 기능을 하나 이상의 인라인 프레임에 대해 반복적 및 동적으로 수행할 수 있다.
도 5는 본 명세서에서 논의된 임의의 컴퓨터 시스템(시스템 110을 포함하는) 및 일부 실시예에 따른 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 및 스크립트 제공자 모듈과 같은 구성 요소를 구현하기 위해 채용될 수 있는 예시적인 컴퓨터 시스템(500)의 일반 구조를 도시한다. 컴퓨터 시스템(500)은 디스플레이를 위해 네트워크(105)를 통해 정보를 제공하는데 사용될 수 있다. 도 5의 컴퓨터 시스템(500)은 메모리(525), 하나 이상의 통신 인터페이스(505) 및 하나 이상의 출력 디바이스(510)(예컨대, 하나 이상의 디스플레이 유닛) 및 하나 이상의 입력 디바이스(515)와 통신 가능하게 결합된 하나 이상의 프로세서(520)를 포함한다. 프로세서 (520)는 데이터 처리 시스템(110)내에 포함되거나 또는 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135), 스크립트 제공자 모듈(140), 컨텐츠 삽입 모듈(230), 스크롤 감지 모듈(235) 및 스크롤 할당 모듈(240) 등과 같은 시스템(110)의 다른 구성 요소 내에 포함될 수 있다.
도 5의 컴퓨터 시스템(500)에서, 메모리(525)는 임의의 컴퓨터 판독 가능 저장 매체를 포함할 수 있고, 각각의 시스템에 대해 본 명세서에서 기술된 다양한 기능뿐만 아니라 그에 관련된 임의의 데이터, 그에 관련된 데이터, 그에 의해 발생된 데이터 또는 통신 인터페이스(들) 또는 입력 디바이스 (있는 경우)를 통해 수신된 데이터를 구현하기 위한 프로세서 실행 가능 명령과 같은 컴퓨터 명령을 저장할 수 있다. 도 1의 시스템(110)을 다시 참조하면, 데이터 처리 시스템(110)은 하나 이상의 컨텐츠 유닛의 재고 가용성(availability of inventory), 하나 이상의 컨텐츠 유닛의 예약 등과 관련된 정보를 저장하기 위한 메모리(525)를 포함할 수 있다. 메모리(525)는 데이터베이스(145)를 포함할 수 있다. 도 5에 도시된 프로세서(들)(520)는 메모리(525)에 저장된 명령을 실행하는데 사용될 수 있고, 그렇게 할 때 명령의 실행에 따라 처리 및/또는 생성된 다양한 정보를 메모리로부터 판독하거나 메모리에 기록할 수 있다.
도 5에 도시된 컴퓨터 시스템(500)의 프로세서(520)는 또한 통신 인터페이스(들)(505)에 통신 가능하게 결합되거나 통신 인터페이스(들)(505)를 제어하여 명령들의 실행에 따라 다양한 정보를 송신 또는 수신할 수 있다. 예를 들어, 통신 인터페이(들)(505)는 유선 또는 무선 네트워크, 버스 또는 다른 통신 수단에 결합될 수 있으며, 따라서 컴퓨터 시스템(500)이 다른 디바이스(예컨대, 다른 컴퓨터 시스템)로 정보를 전송하거나 다른 디바이스로부터 정보를 수신할 수 있게 한다. 도 1의 시스템에 명시적으로 도시되지 않았지만, 하나 이상의 통신 인터페이스는 시스템(50)의 구성 요소 간의 정보 흐름을 용이하게 한다. 일부 구현예에서, 통신 인터페이스(들)는 컴퓨터 시스템(500)의 적어도 일부 양태에 대한 액세스 포털로서 웹 사이트를 제공하도록 구성될 수 있다(예컨대, 다양한 하드웨어 구성 요소 또는 소프트웨어 구성 요소를 통해). 통신 인터페이스(505)의 예는 사용자가 데이터 처리 시스템(50)과 통신할 수 있는 사용자 인터페이스(예컨대, 웹 페이지)를 포함한다.
도 5에 도시된 컴퓨터 시스템(500)의 출력 디바이스(510)들은 예를 들어, 다양한 정보가 보여지거나 명령의 실행과 관련하여 인지될 수 있도록 제공될 수 있다. 입력 디바이스(들)(515)는, 예를 들어, 사용자가 수동 조정을 수행하거나, 선택을 하거나, 데이터를 인가하거나 또는 명령의 실행 동안 프로세서와 다양한 방식으로 상호 작용할 수 있도록 제공될 수 있다. 본 명세서에서 논의된 다양한 시스템에 채용될 수 있는 일반적인 컴퓨터 시스템 구조에 관한 추가 정보가 본 명세서에 더 제공된다.
본 명세서에서 기술된 주제 및 동작의 구현은 디지털 전자 회로 또는 본 명세서에 개시된 구조 및 그 구조적 등가물을 포함하는 유형의 매체, 펌웨어 또는 하드웨어 상에 구현된 컴퓨터 소프트웨어로 구현될 수 있거나 이들 중 하나 이상의 조합으로 구현될 수 있다. 본 명세서에서 설명된 주제의 구현은 하나 이상의 컴퓨터 프로그램, 예를 들어 데이터 처리 디바이스에 의한 실행을 위해 또는 데이터 처리 장치의 동작을 제어하기 위해 컴퓨터 저장 매체상에 인코딩된 컴퓨터 프로그램 명령의 하나 이상의 모듈로서 구현될 수 있다. 프로그램 명령은 인위적으로 생성된 전파 신호, 예를 들어, 데이터 처리 디바이스에 의한 실행을 위해 적절한 수신기 장치로 전송하기 위한 정보를 인코딩하기 위해 생성되는 기계-발생의 전기적, 광학적 또는 전자기적 신호에 인코딩될 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독 가능 저장 디바이스, 컴퓨터 판독 가능 저장 기판, 랜덤 또는 직렬 액세스 메모리 어레이 또는 디바이스, 또는 이들 중 하나 이상의 조합 일 수 있거나 포함될 수 있다. 또한, 컴퓨터 저장 매체는 전파 신호는 아니지만, 컴퓨터 저장 매체는 인위적으로 생성된 전파 신호로 인코딩된 컴퓨터 프로그램 명령의 소스 또는 목적지를 포함할 수 있다. 컴퓨터 저장 매체는 또한 하나 이상의 개별 물리적 구성 요소 또는 매체 (예컨대, 다수의 CD, 디스크 또는 다른 저장 디바이스) 일 수 있거나 이들에 포함될 수 있다.
본 명세서에서 개시된 특징들은 인터넷 접속을 보다 전통적인 텔레비전 프로그래밍 소스(예컨대, 케이블, 위성, 공중파 또는 기타 신호를 통해 수신된)와 통합하도록 구성된 처리 모듈을 포함할 수 있는 스마트 텔레비전 모듈(또는 접속된 텔레비전 모듈, 하이브리드 텔레비전 모듈 등) 상에 구현될 수 있다. 스마트 텔레비전 모듈은 텔레비전 세트에 물리적으로 통합될 수 있거나 셋톱 박스, 블루 레이 또는 다른 디지털 미디어 플레이어, 게임 콘솔, 호텔 텔레비전 시스템 및 다른 연동 디바이스와 같은 개별 디바이스를 포함할 수 있다. 스마트 텔레비전 모듈은 시청자가 웹, 로컬 케이블 TV 채널, 위성 TV 채널 상의 또는 로컬 하드 드라이브에 저장된 비디오, 영화, 사진 및 기타 컨텐츠를 검색하고 찾을 수 있도록 구성될 수 있다. 셋톱 박스(STB) 또는 셋톱 장치(STU)는 튜너를 포함하고 텔레비전 세트 및 외부 신호 소스에 연결되어 신호를 컨텐츠로 변환한 후 텔레비전 화면 또는 다른 디스플레이 디바이스에 디스플레이하는 정보 어플라이언스 디바이스를 포함할 수 있다. 스마트 텔레비전 모듈은 웹 브라우저 및 복수의 스트리밍 미디어 서비스들, 연결 케이블 또는 위성 미디어 소스, 다른 웹 "채널들" 등과 같은 복수의 상이한 어플리케이션들에 대한 아이콘을 포함하는 홈 스크린 또는 최상위 스크린을 제공하도록 구성될 수 있다. 스마트 텔레비전 모듈은 또한 사용자에게 전자 프로그래밍 가이드를 제공하도록 구성될 수 있다. 스마트 텔레비전 모듈에 대한 연동 어플리케이션은 모바일 컴퓨팅 장치상에서 사용자에게 이용 가능한 프로그램에 관한 추가 정보를 제공하여 사용자가 스마트 텔레비전 모듈 등을 제어할 수 있게 할 수있다. 대안적인 구현예에서, 상기 특징들은 랩탑 컴퓨터 또는 다른 개인용 컴퓨터, 스마트 폰, 다른 모바일 전화, 휴대용 컴퓨터, 태블릿 PC, 또는 다른 컴퓨팅 디바이스 상에서 구현될 수 있다.
본 명세서에서 설명된 동작은 하나 이상의 컴퓨터 판독 가능 저장 장치에 저장되거나 다른 소스로부터 수신된 데이터에 대해 데이터 처리 장치에 의해 수행되는 동작으로서 구현될 수 있다.
"데이터 처리 장치", "데이터 처리 시스템", "사용자 디바이스"또는 "컴퓨팅 디바이스"라는 용어는 예를 들어 프로그램 가능 프로세서, 컴퓨터, 시스템 온 칩, 다수의 시스템 또는 이들의 조합을 포함하는, 데이터 처리하기 위한 모든 종류의 장치, 디바이스 및 기계를 포함한다. 장치는 특수 목적 논리 회로, 예를 들어 FPGA(필드 프로그램 가능 게이트 어레이) 또는 ASIC(주문형 집적 회로)를 포함할 수 있다. 장치는 또한 하드웨어 이외에 문제의 컴퓨터 프로그램, 예를 들어 프로세서 펌웨어를 구성하는 코드, 프로토콜 스택, 데이터베이스 관리 시스템, 운영 체제, 크로스-플랫폼 실행 시간(cross-platform runtime) 환경, 가상 머신 또는 이들 중 하나 이상의 조합을 포함할 수 있다. 장치 및 실행 환경은 웹 서비스, 분산 컴퓨팅 및 그리드 컴퓨팅 인프라와 같은 다양한 다른 컴퓨팅 모델 인프라 구조를 실현할 수 있다. 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 및 스크립트 제공자 모듈(140)은 하나 이상의 데이터 처리 장치, 컴퓨팅 디바이스 또는 프로세서를 포함하거나 공유할 수 있다.
컴퓨터 프로그램(프로그램, 소프트웨어, 소프트웨어 어플리케이션, 스크립트 또는 코드로도 알려진)은 컴파일된 또는 해석된 언어, 선언적 또는 절차적 언어를 포함하는 임의의 형태의 프로그래밍 언어로 기록될 수 있으며, 독립형(stand-alone) 프로그램 또는 모듈, 구성 요소, 서브 루틴, 객체 또는 컴퓨팅 환경에서 사용하기에 적합한 기타 유닛을 포함하는 임의의 형태로 배포될 수 있다. 컴퓨터 프로그램은 파일 시스템의 파일에 해당할 수 있지만 반드시 그런 것은 아니다. 프로그램은 다른 프로그램이나 데이터(예컨대, 마크업 언어 문서에 저장된 하나 이상의 스크립트)를 보유하는 파일의 일부분, 문제의 프로그램 전용 단일파일 또는 다수의 조정 파일(예컨대, 하나 이상의 모듈, 서브 프로그램 또는 코드의 일부를 저장하는 파일)에 저장될 수 있다. 컴퓨터 프로그램은 하나의 컴퓨터 상에서 또는 하나의 사이트에 위치하거나 다수의 사이트에 분산되어 있고 통신 네트워크로 상호 연결된 다수의 컴퓨터 상에서 실행되도록 배포될 수 있다.
본 명세서에서 설명된 프로세스 및 논리 흐름은 입력 데이터를 조작하고 출력을 생성함에 의해 동작을 수행하기 위해, 하나 이상의 컴퓨터 프로그램을 실행하는 하나 이상의 프로그램 가능 프로세서에 의해 수행될 수 있다. 프로세스 및 논리 흐름은 또한 특수 목적의 논리 회로, 예를 들어, FPGA 또는 ASIC로서 구현될 수 있다.
컴퓨터 프로그램의 실행에 적합한 프로세서는 예를 들어 범용 및 특수 목적 마이크로 프로세서와 임의의 종류의 디지털 컴퓨터의 임의의 하나 이상의 프로세서를 포함한다. 일반적으로, 프로세서는 판독 전용 메모리 또는 랜덤 액세스 메모리 또는 둘 모두로부터 명령 및 데이터를 수신할 것이다. 컴퓨터의 필수 엘리먼트는 명령에 따라 동작을 수행하는 프로세서 및 명령과 데이터를 저장하는 하나 이상의 메모리 디바이스일 수 있다. 일반적으로, 컴퓨터는 또한 데이터(예컨대, 자기, 광 자기 디스크 또는 광 디스크)를 저장하기 위한 하나 이상의 대용량 저장 장치로부터 데이터를 수신하거나 해당 장치로 데이터를 전송하거나 또는 둘 모두를 하도록 포함하거나 하도록 동작 가능하게 결합될 것이다. 그러나, 컴퓨터는 그러한 디바이스를 가질 필요가 없다. 게다가, 컴퓨터는 다른 디바이스, 예를들어, 모바일 전화기, 개인 휴대 정보 단말기(PDA), 모바일 오디오 또는 비디오 플레이어, 게임 콘솔, GPS 수신기 또는 휴대용 저장 디바이스(예를 들어, USB 플래시 드라이브)에 내장될 수 있다. 컴퓨터 프로그램 명령 및 데이터를 저장하기에 적합한 디바이스는 예를 들어 EPROM, EEPROM 및 플래시 메모리 디바이스와 같은 반도체 메모리 디바이스; 내부 하드 디스크 또는 이동식 디스크와 같은 자기 디스크; 광 자기 디스크; 및 CD ROM 및 DVD-ROM 디스크를 포함하는 모든 형태의 비 휘발성 메모리, 매체 및 메모리 디바이스를 포함한다. 프로세서와 메모리는 특수 목적 논리 회로에 의해 보조되거나 또는 그 안에 통합될 수 있다.
사용자와의 상호 작용(interaction)을 제공하기 위해, 본 명세서에서 설명된 주제의 구현예는 사용자에게 정보를 디스플레이하기 위한 디스플레이 디바이스, 예를 들어 CRT(음극선 관), 플라즈마 또는 LCD(액정 디스플레이) 모니터 및 사용자가 컴퓨터에 입력을 제공할 수 있는 키보드 및 포인팅 장치, 예를 들어, 마우스 또는 트랙볼을 갖는 컴퓨터상에서 구현될 수 있다. 다른 종류의 디바이스가 사용자와의 상호 작용을 제공하는데 사용될 수 있다. 예를 들어, 사용자에게 제공되는 피드백은 시각적 피드백, 청각적 피드백 또는 촉각적 피드백과 같은 임의의 형태의 감각 피드백을 포함할 수 있으며, 사용자로부터의 입력은 음향, 음성 또는 촉각 입력을 포함하는 임의의 형태로 수신될 수 있다. 또한, 컴퓨터는 사용자가 사용하는 디바이스와 문서를 주고 받음으로써 예를 들어, 웹 브라우저로부터 수신된 요청에 응답하여 사용자의 클라이언트 디바이스상의 웹 브라우저로 웹 페이지를 전송함으로써 사용자와 상호 작용할 수 있다.
본 명세서에서 설명된 주제의 구현예는 백 엔드 구성 요소(예컨대, 데이터 서버로서)를 포함하거나, 미들웨어 구성 요소(예컨대, 어플리케이션 서버)를 포함하거나 또는 프론트 앤드 구성 요소(예컨대, 사용자가 본 명세서에서 설명된 주제의 구현과 상호 작용할 수 있는 그래픽 사용자 인터페이스 또는 웹 브라우저를 갖는 클라이언트 컴퓨터)를 포함하거나, 또는 하나 이상의 그러한 백 엔드, 미들웨어 또는 프런트 엔드 구성 요소의 임의의 조합을 포함하는 컴퓨팅 시스템에서 구현될 수 있다. 시스템의 구성 요소는 디지털 데이터 통신의 임의의 형태 또는 매체, 예를 들어 통신 네트워크에 의해 상호 접속될 수 있다. 통신 네트워크의 예는 로컬 영역 네트워크(LAN) 및 광역 네트워크(WAN), 네트워크간(예컨대, 인터넷), 피어투피어 네트워크(예컨대, 애드 혹 피어투피어 네트워크)를 포함할 수 있다.
시스템(500) 또는 시스템(110)과 같은 컴퓨팅 시스템은 클라이언트 및 서버를 포함할 수 있다. 예를 들어, 데이터 처리 시스템(110)은 하나 이상의 데이터 센터 또는 서버 팜에 하나 이상의 서버를 포함할 수 있다. 클라이언트와 서버는 일반적으로 서로 멀리 떨어져 있으며 전형적으로 통신 네트워크를 통해 상호 작용한다. 클라이언트와 서버의 관계는 각각의 컴퓨터에서 실행되고 서로 클라이언트-서버 관계를 갖는 컴퓨터 프로그램에 의해 발생한다. 일부 구현예에서, 서버는 데이터(예컨대, HTML 페이지)를 클라이언트 장치(예컨대, 클라이언트 장치와 상호 작용하는 사용자에게 데이터를 표시하고 사용자 입력을 수신하기 위한 목적으로)로 전송한다. 클라이언트 장치에서 생성된 데이터(예컨대, 사용자 상호 작용의 결과)는 서버에서 클라이언트 장치로부터 수신될 수 있다.
본 명세서는 다수의 특정 구현 세부 사항을 포함하지만, 이들은 임의의 발명 또는 청구될 수 있는 범위에 대한 제한으로서 해석되어서는 안되며, 오히려 본 명세서에 설명된 시스템 및 방법의 특정 구현예에 특정한 특징의 설명으로 해석되어야한다. 개별 구현의 문맥에서 본 명세서에 기술된 소정 특징은 또한 단일 구현으로 조합하여 구현될 수 있다. 반대로, 단일 구현의 문맥에서 기술된 다양한 특징은 또한 다수의 구현예에서 개별적으로 또는 임의의 적절한 하위 조합으로 구현될 수 있다. 더욱이, 특징들은 소정의 조합으로 작용하고 상술한 바와같이 초기에는 청구된 것으로 설명될 수 있지만, 청구된 조합으로부터의 하나 이상의 특징은 일부 경우 조합으로부터 제거될 수 있고, 청구된 조합은 서브 조합 또는 변형으로 유도될 수 있다.
유사하게, 동작들이 특정 순서로 도면에 도시되어 있지만, 이는 바람직한 결과를 달성하기 위해 그러한 동작들이 도시된 특정 순서 또는 순차적 순서로 수행되거나 모든 예시된 동작이 수행될 것을 요구하는 것으로 이해되어서는 안된다. 일부 경우, 청구 범위에 인용된 동작은 다른 순서로 수행될 수 있으며 여전히 바람직한 결과를 얻을 수 있다. 또한, 추가된 도면에 도시된 프로세스는 바람직한 결과를 얻기 위해 도시된 특정 순서 또는 순차적 순서를 반드시 필요로 하지는 않는다.
소정 상황에서, 멀티 태스킹 및 병렬 처리가 유용할 수 있다. 또한, 상술한 구현예에서 다양한 시스템 구성 요소의 분리는 모든 구현예에서 그러한 분리를 필요로하는 것으로 이해되어서는 안되며, 기술된 프로그램 구성 요소 및 시스템은 일반적으로 단일 소프트웨어 제품 내에 함께 통합되거나 다수의 소프트웨어 제품에 패키징될 수 있다는 것을 이해해야 한다. 예를 들어, 컨텐츠 요청 모듈(130), 컨텐츠 선택 모듈(135) 및 스크립트 제공자 모듈(140)은 데이터 처리 시스템(110), 단일 모듈, 하나 이상의 처리 모듈을 갖는 논리 디바이스, 하나 이상의 서버, 검색 엔진의 일부일 수 있다.
이제 몇몇 예시적인 구현예가 설명되었지만, 전술한 내용은 예시적인 것으로 제한적인 것은 아니며 예로서 제시된 것임이 자명하다 특히, 본 명세서에서 제시된 많은 예들은 방법 동작 또는 시스템 요소의 특정 조합을 포함하지만, 그러한 동작 및 요소는 동일한 목적을 달성하기 위해 다른 방식으로 결합 될 수 있다. 하나의 구현예와 관련해서만 논의된 동작, 요소 및 특징은 다른 구현예 또는 구현예에서 유사한 역할로부터 배제되지 않는다.
본 명세서에서 사용된 표현 및 용어는 설명의 목적을 위한 것이며 한정하는 것으로 간주되어서는 안된다. "포함하는(including)" "포함하는(comprising)" "가지는(having)" "포함하는(involving)" "~로 특징 짓는(characterized by)" "~인 것이 특징인(characterized in that)" 및 그들의 다양한 변형은 이하에 열거된 아이템, 등가물 및 추가 아이템뿐만 아니라 이후에 나열된 아이템으로 구성된 대체 구현을 포괄하는 의미이다. 일 구현예에서, 본 명세서에 기술된 시스템 및 방법은 설명된 요소, 동작 또는 구성 요소 중 하나 이상, 또는 모두의 각각의 조합으로 구성된다.
단수로 언급된 시스템 및 방법의 구현 또는 요소 또는 동작에 대한 임의의 참조는 복수의 이들 요소를 포함하는 구현을 포함할 수도 있고, 임의의 구현 또는 요소 또는 동작에 대한 복수의 참조는 구현 단일 요소만 포함한다. 단수 또는 복수 형태의 참조는 현재 개시된 시스템 또는 방법, 구성 요소, 동작 또는 요소를 단일 또는 복수 구성으로 제한하려는 것이 아니다. 정보, 동작 또는 요소에 기반한 동작 또는 요소에 대한 언급은 해당 행위 또는 요소가 적어도 부분적으로 정보, 동작 또는 요소에 기초한 구현을 포함할 수 있다.
본 명세서에 개시된 임의의 구현은 임의의 다른 구현과 결합될 수 있으며, "구현", "일부 구현", "일부 구현", "대체 구현", "다양한 구현","하나의 구현" 등은 반드시 상호 배타적이며 구현과 관련하여 기술된 특정 특징, 구조 또는 특성이 적어도 하나의 구현예에 포함될 수 있음을 나타내는 것이다. 본 명세서에 사용된 용어는 반드시 모두 동일한 구현을 지칭하는 것은 아니다. 모든 구현은 본 명세서에 개시된 양태 및 구현예와 일치하는 임의의 방식으로 다른 구현예와 포괄적으로 또는 배타적으로 결합될 수 있다.
"또는"에 대한 언급은 "또는"을 사용하여 기술된 임의의 용어가 기술된 용어 중 하나, 둘 이상 및 모두를 나타낼 수 있도록 포괄적인 것으로 해석될 수 있다.
도면, 상세한 설명 또는 임의의 청구 범위의 기술적 특징이 참조 번호 뒤에있는 경우, 도면, 상세한 설명 및 청구 범위의 명료성을 증가시키는 목적을 위해 참조 번호를 포함시켰다. 따라서, 참조 번호 또는 그것들 부재는 어떠한 청구항 요소들의 범위에 대해 어떠한 제한 효과도 가지지 않는다.
여기에 설명된 시스템 및 방법은 그 특성을 벗어나지 않고 다른 특정 형태로 구체화 될 수 있다. 본 명세서에서 제공되는 예가 어플리케이션에서 스크롤 이벤트를 할당하는 것에 관한 것이지만, 여기에 설명된 시스템 및 방법은 다른 환경에 적용될 수 있다. 전술한 구현예는 설명된 시스템 및 방법을 제한하기보다는 예시적인 것이다. 따라서, 본 명세서에 설명된 시스템 및 방법의 범위는 전술한 설명보다는 추가된 청구 범위에 의해 표시되며, 청구 범위의 의미 및 범위 내에서의 변경이 본 명세서에 포함된다.

Claims (13)

  1. 정보 자원 페이지의 제1인라인 프레임의 크기를 정보 자원이 디스플레이되고 있는 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계로서, 상기 제1인라인 프레임에는 적어도 제1컨텐츠 문서가 내장되고;
    어플리케이션에서 스크롤 이벤트를 모니터링하는 단계;
    스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제1오프셋이 제1임계값 이하인지 결정하는 단계;
    스크롤 이벤트의 검출에 응답하여, 제1인라인 프레임에 대해, 제1컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제2오프셋이 제2임계값 이상인지 결정하는 단계;
    제1오프셋이 제1임계값 이하라는 결정 및 제2오프셋이 제2임계값 이상이라는 결정에 응답하여, 스크롤 이벤트를 제1인라인 프레임에 할당하는 단계; 및
    제1오프셋의 적어도 하나가 제1임계값 이하가 아니라는 결정 및 제2오프셋이 제2임계값 이상이 아니라는 결정에 응답하여, 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계;를 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  2. 제1항에 있어서,
    제1오프셋의 적어도 하나가 제1임계값 이하가 아니라는 결정 및 제2오프셋이 제2임계값 이상이 아니라는 결정에 것에 응답하여, 상기 정보 자원 페이지에 제2인라인 프레임을 추가하는 단계를 더 포함하고, 상기 제2인라인 프레임에는 적어도 제2컨텐츠 문서가 내장되는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  3. 제2항에 있어서,
    정보 자원 페이지의 제2인라인 프레임의 크기를 정보 자원이 디스플레이되는 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계;
    스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제1컨텐츠 문서 단부와 뷰포트의 제1뷰포트 단부 사이의 제3오프셋이 제3임계값 이하인지 결정하는 단계;
    스크롤 이벤트의 검출에 응답하여, 제2인라인 프레임에 대해, 제2컨텐츠 문서의 제2컨텐츠 문서 단부와 뷰포트의 제2뷰포트 단부 사이의 제4오프셋이 제4임계값 이상인지 결정하는 단계; 및
    제3오프셋이 제3임계값 이하라는 결정 및 제4오프셋이 제4임계값 이상이라는 결정에 응답하여, 스크롤 이벤트를 제2인라인 프레임에 할당하는 단계;를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법..
  4. 제3항에 있어서,
    제3오프셋이 제3임계값 이하라는 결정 및 제4오프셋이 제4임계값 이상이라는 결정의 적어도 하나에 응답하여, 어플리케이션의 스크롤 이벤트를 모니터링하는 단계;를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  5. 제2항에 있어서,
    제2컨텐츠 문서의 크기가 뷰포트의 크기보다 작은지 결정하는 단계;
    제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하는 단계; 및
    제2인라인 프레임의 크기를 컨텐츠 문서의 크기에 대응하도록 설정하는 것에 응답하여, 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계;를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  6. 제1항에 있어서,
    정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는지 결정하는 단계; 및
    정보 자원 페이지가 제1인라인 프레임 이외의 다른 인라인 프레임을 갖지 않는다는 결정에 응답하여 제2인라인 프레임을 추가하는 단계;를 더 포함하며, 상기 제2인라인 프레임에는 적어도 제2컨텐츠 문서가 내장되는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  7. 제1항에 있어서,
    정보 자원 페이지에 스크롤 이벤트를 할당한 후 제1인라인 프레임에 대해, 제1인라인 프레임을 위한 제1컨텐츠 문서에 대한 보조 컨텐츠 부가물을 모니터링하는 단계를 더 포함하는 것으로, 상기 보조 컨텐츠 부가물은 제1컨텐츠 문서의 크기를 변경하고;
    상기 제1오프셋을 결정하는 단계는 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제1오프셋을 결정하는 단계를 더 포함하고; 및
    상기 제2오프셋을 결정하는 단계는 보조 컨텐츠 부가물을 검출하는 것에 응답하여 제2오프셋을 결정하는 단계를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  8. 제1항에 있어서,
    어플리케이션의 뷰포트의 크기 변화를 모니터링하는 단계; 및
    어플리케이션의 뷰포트의 크기 변화를 검출하는 것에 응답하여, 어플리케이션의 뷰포트의 크기에 대응하도록 정보 자원 페이지의 제1인라인 프레임의 크기를 재설정하는 단계;를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  9. 제1항에 있어서, 상기 정보 자원 페이지의 제1인라인 프레임의 크기를 어플리케이션의 뷰포트의 크기에 대응하도록 설정하는 단계는,
    정보 자원 페이지의 제1인라인 프레임의 높이를 어플리케이션의 뷰포트의 높이 이상으로 설정하는 단계; 및
    정보 자원 페이지의 제1인라인 프레임의 폭을 어플리케이션의 뷰포트의 폭 이상으로 설정하는 단계;를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  10. 제1항에 있어서, 상기 스크롤 이벤트를 제1인라인 프레임에 할당하는 단계는 제1인라인 프레임의 스크롤 가능 속성을 스크롤 가능(scrollable)으로 할당하는 단계; 및
    상기 스크롤 이벤트를 정보 자원 페이지에 할당하는 단계는 정보 자원 페이지의 스크롤 가능 속성을 스크롤 가능으로 할당하는 단계;를 더 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법.
  11. 데이터 처리 시스템에서 클라이언트 디바이스로 무한 스크롤 할당 스크립트를 제공하는 단계를 포함하고, 상기 스크립트는 클라이언트 디바이스에서 실행되어 클라이언트 디바이스가 임의의 선행 청구항에 따른 방법을 수행하도록 구성된 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 방법템.
  12. 프로세서 판독 가능 명령을 저장하는 메모리; 및
    메모리에 저장된 명령을 판독 및 실행하는 프로세서;를 포함하고,
    상기 프로세서 판독 가능 명령은 컴퓨터를 제어하여 제1항 내지 제11항 중 어느 한 항에 따른 방법을 수행하도록 배치된 명령들을 포함하는 것을 특징으로 하는 어플리케이션에서 스크롤 이벤트를 할당하는 시스템.
  13. 컴퓨터로 하여금 제1항 내지 제10항 중 어느 한 항에 따른 방법을 수행하도록 구성된 컴퓨터 판독 가능 명령을 포함하는 것을 특징으로 하는 컴퓨터 프로그램을 실행하는 컴퓨터 판독 가능 매체.
KR1020177035508A 2015-10-26 2016-10-26 무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법 KR102038640B1 (ko)

Applications Claiming Priority (5)

Application Number Priority Date Filing Date Title
US201562246453P 2015-10-26 2015-10-26
US62/246,453 2015-10-26
US15/014,795 US10585576B2 (en) 2015-10-26 2016-02-03 Systems and methods for attributing a scroll event in an infinite scroll graphical user interface
US15/014,795 2016-02-03
PCT/US2016/058833 WO2017075033A1 (en) 2015-10-26 2016-10-26 Systems and methods for attributing a scroll event in an infinite scroll graphical user interface

Publications (2)

Publication Number Publication Date
KR20180020971A true KR20180020971A (ko) 2018-02-28
KR102038640B1 KR102038640B1 (ko) 2019-11-29

Family

ID=58558671

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020177035508A KR102038640B1 (ko) 2015-10-26 2016-10-26 무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법

Country Status (8)

Country Link
US (2) US10585576B2 (ko)
EP (2) EP4170489A1 (ko)
JP (1) JP6586179B2 (ko)
KR (1) KR102038640B1 (ko)
CN (1) CN108475200B (ko)
DE (1) DE112016002579T5 (ko)
GB (2) GB2554622B (ko)
WO (1) WO2017075033A1 (ko)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10325293B2 (en) * 2014-01-17 2019-06-18 Rakuten, Inc. Information processing device, display control method, program and storage medium
US10692531B2 (en) * 2014-10-25 2020-06-23 Yieldmo, Inc. Methods for serving interactive content to a user
US10209867B1 (en) * 2015-05-15 2019-02-19 Jordan M. Becker Electronic documentation integration and viewing system
CN109753146B (zh) * 2018-05-11 2020-07-03 北京字节跳动网络技术有限公司 一种移动终端启动应用的方法及移动终端
CN109799945B (zh) * 2018-12-24 2021-04-13 天津字节跳动科技有限公司 小程序长列表滚动显示方法、装置、电子设备及存储介质
CN109889878A (zh) * 2019-01-03 2019-06-14 百度在线网络技术（北京）有限公司 视频信息处理方法、装置、设备及计算机可读存储介质
EP3901752A1 (en) * 2020-04-22 2021-10-27 Taboola.com Ltd. Display adjustments
US11650911B2 (en) * 2021-06-08 2023-05-16 Micro Focus Llc Supporting record and replay for infinite scroll elements
CN114428657B (zh) * 2022-01-11 2024-04-05 上海万物新生环保科技集团有限公司 一种在H5端基于Taro框架的滑动方法与设备

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004031994A1 (en) * 2002-09-30 2004-04-15 Embedded Internet Solutions, Inc. Methods for optimizing display and navigation of web contents on wireless devices

Family Cites Families (50)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6912694B1 (en) * 2000-06-28 2005-06-28 Intel Corporation Providing a scrolling function for a multiple frame web page
US20060174214A1 (en) * 2003-08-13 2006-08-03 Mckee Timothy P System and method for navigation of content in multiple display regions
JP2005202766A (ja) * 2004-01-16 2005-07-28 National Institute Of Information & Communication Technology 類似コンテンツの同時提示システム
US20060021280A1 (en) * 2004-07-30 2006-02-02 Hamilton Daniel B Reformer, and methods of making and using the same
US7430712B2 (en) * 2005-03-16 2008-09-30 Ameriprise Financial, Inc. System and method for dynamically resizing embeded web page content
US7428709B2 (en) * 2005-04-13 2008-09-23 Apple Inc. Multiple-panel scrolling
EP1783632B1 (en) 2005-11-08 2012-12-19 Intel Corporation Content recommendation method with user feedback
US7664739B2 (en) 2006-02-14 2010-02-16 Microsoft Corporation Object search ui and dragging object results
US8555193B2 (en) * 2008-01-17 2013-10-08 Google Inc. System for intelligent automated layout and management of interactive windows
US8959104B2 (en) 2008-03-21 2015-02-17 Microsoft Corporation Presenting query suggestions based upon content items
US20110184960A1 (en) 2009-11-24 2011-07-28 Scrible, Inc. Methods and systems for content recommendation based on electronic document annotation
US20090327869A1 (en) 2008-06-27 2009-12-31 Microsoft Corporation Online ad serving
US8381123B2 (en) 2008-06-27 2013-02-19 Microsoft Corporation Positioning and realizing of virtualized visible content within a viewport
US8145521B2 (en) 2008-07-15 2012-03-27 Google Inc. Geographic and keyword context in embedded applications
CN102124466B (zh) 2008-09-05 2013-09-11 索尼公司 内容推荐系统、内容推荐方法和内容推荐设备
US8181110B2 (en) 2008-10-14 2012-05-15 I-Fax.Com Inc. DOM based media viewer
US20100179949A1 (en) 2009-01-15 2010-07-15 Safar Samir H Method and system for an internet browser add-on providng simultaneous multiple interactive websites on one internet browser window
CN101788975A (zh) * 2009-01-23 2010-07-28 国际商业机器公司 控制文档滚动的方法和设备
US10216708B2 (en) * 2009-10-05 2019-02-26 Adobe Systems Incorporated Paginated viewport navigation over a fixed document layout
US20110082755A1 (en) 2009-10-06 2011-04-07 Oded Itzhak System and method for presenting and metering advertisements
CN102117290B (zh) 2009-12-30 2015-03-18 北京搜狗科技发展有限公司 一种展现网页中页面元素的方法及系统
US8438504B2 (en) 2010-01-06 2013-05-07 Apple Inc. Device, method, and graphical user interface for navigating through multiple viewing areas
US8499257B2 (en) * 2010-02-09 2013-07-30 Microsoft Corporation Handles interactions for human—computer interface
US8423901B2 (en) 2010-03-15 2013-04-16 International Business Machines Corporation Displaying content outside IFRAME container
DE102010061296A1 (de) * 2010-12-16 2012-06-21 Schott Solar Ag Verfahren zum Herstellen von elektrisch leitenden Kontakten auf Solarzellen sowie Solarzelle
US9575615B1 (en) 2011-03-22 2017-02-21 Amazon Technologies, Inc. Presenting supplemental content
US8645859B2 (en) * 2011-03-23 2014-02-04 Apple Inc. Sliding stacks
US8610724B2 (en) 2011-07-29 2013-12-17 Qualcomm Innovation Center, Inc. Systems and methods for webpage adaptive rendering
WO2013033445A2 (en) 2011-08-31 2013-03-07 Vibrant Media Inc. Systems and methods for contextualizing a toolbar, an image and inline mobile banner advertising
US9262766B2 (en) * 2011-08-31 2016-02-16 Vibrant Media, Inc. Systems and methods for contextualizing services for inline mobile banner advertising
US8307278B1 (en) 2011-09-26 2012-11-06 Google Inc. Tiling mechanism to combine web services
US9865005B1 (en) 2012-01-17 2018-01-09 Comscore, Inc. Unified content visibility and video content monitoring
US20150160817A1 (en) 2012-04-10 2015-06-11 Google Inc. Search results including supplemental content triggered by user actions when browsing the search results
WO2013165944A2 (en) 2012-05-02 2013-11-07 Zedo, Inc. Systems, techniques and mechanisms for displaying online advertisements in a viewable area of a web browser
US20140358668A1 (en) 2012-07-25 2014-12-04 Google Inc. System and method for integrating supplemental content within a webpage
JP2014056474A (ja) * 2012-09-13 2014-03-27 Brother Ind Ltd 画像表示装置及び、制御プログラム
US9355415B2 (en) 2012-11-12 2016-05-31 Google Inc. Providing content recommendation to users on a site
US9965162B2 (en) * 2012-11-29 2018-05-08 Facebook, Inc. Scrolling across boundaries in a structured document
US20140195337A1 (en) 2013-01-09 2014-07-10 Amazon Technologies, Inc. Browser interface for accessing supplemental content associated with content pages
US20140195890A1 (en) 2013-01-09 2014-07-10 Amazon Technologies, Inc. Browser interface for accessing supplemental content associated with content pages
US20150213487A1 (en) 2013-02-03 2015-07-30 Arize Nwosu Methods and systems for advertising using scrollable refresh trigger
US9632986B2 (en) * 2013-03-14 2017-04-25 Aol Inc. Systems and methods for horizontally paginating HTML content
US20140281901A1 (en) 2013-03-18 2014-09-18 Google Inc. Estimating visibility of content items
US9329765B2 (en) * 2013-06-14 2016-05-03 Htc Corporation Method and electronic apparatus for scrolling frame content and recording medium using the same
US9535574B2 (en) * 2013-06-28 2017-01-03 Jive Software, Inc. Infinite scrolling a very large dataset
US10380239B2 (en) * 2013-12-03 2019-08-13 Sharethrough Inc. Dynamic native advertisment insertion
US10325293B2 (en) * 2014-01-17 2019-06-18 Rakuten, Inc. Information processing device, display control method, program and storage medium
WO2016003487A1 (en) 2014-07-02 2016-01-07 The Nielsen Company (Us), Llc Methods and apparatus to identify sponsored media in a document object model
JP6130335B2 (ja) 2014-07-18 2017-05-17 ヤフー株式会社 情報表示プログラム、配信装置、情報表示方法および情報表示装置
US20160034976A1 (en) 2014-07-31 2016-02-04 Yahoo!, Inc. Advertisement presentation

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004031994A1 (en) * 2002-09-30 2004-04-15 Embedded Internet Solutions, Inc. Methods for optimizing display and navigation of web contents on wireless devices

Also Published As

Publication number Publication date
US20200183559A1 (en) 2020-06-11
DE112016002579T5 (de) 2018-08-02
GB2554622B (en) 2022-02-09
GB201720780D0 (en) 2018-01-24
WO2017075033A1 (en) 2017-05-04
EP4170489A1 (en) 2023-04-26
EP3295305A1 (en) 2018-03-21
US10585576B2 (en) 2020-03-10
GB2554622A (en) 2018-04-04
CN108475200A (zh) 2018-08-31
GB2599271B (en) 2022-07-13
JP6586179B2 (ja) 2019-10-02
KR102038640B1 (ko) 2019-11-29
CN108475200B (zh) 2020-12-29
GB202117238D0 (en) 2022-01-12
EP3295305B1 (en) 2022-12-21
GB2599271A (en) 2022-03-30
US20170115842A1 (en) 2017-04-27
JP2018524723A (ja) 2018-08-30

Similar Documents

Publication Publication Date Title
KR102038640B1 (ko) 무한 스크롤 그래픽 사용자 인터페이스에서 스크롤 이벤트를 할당하는 시스템 및 방법
US10838609B2 (en) Systems and methods for dynamically appending supplemental content to an information resource responsive to scroll activity
US11080767B2 (en) Systems and methods for creating an interstitial ad experience within a scrolling content frame
US20210133823A1 (en) Systems and methods for automatically managing placement of content slots in an information resource
US20230368250A1 (en) Systems and methods for dynamically inserting content item slots in an information resource
US20140033228A1 (en) Configuring content display dimensions
WO2015030838A1 (en) Methods and systems for providing third-party content on a web page
WO2014133627A1 (en) Creation of a content display area on a web page
EP3249554A1 (en) Systems and methods for client-side dynamic information resource activation and deactivation
US12002072B1 (en) Systems and methods for automatically managing placement of content slots in an information resource

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant