외부 웹 페이지에 연결하는 방법(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

외부 웹 페이지에 연결하고 앱에 이를 표시하는 방법을 배웁니다.

사전 요구 사항

사용자가 기본 앱을 만드는 방법을 알고 있다고 가정합니다. 이와 관련된 도움이 필요한 경우 JavaScript를 사용하여 첫 번째 앱 만들기를 참조하세요.

지침

외부 웹 페이지에 연결

외부 웹 페이지에 연결하려면 HTML에 하이퍼링크를 추가하기만 하면 됩니다. 다음 예는 www.bing.com에 대한 링크를 만듭니다. 링크를 클릭하면 페이지가 앱이 아니라 웹 브라우저에서 열립니다.


<p><a href="https://www.bing.com">Search the web</a></p>

앱에 외부 웹 페이지 표시

앱에서는 iframe에 외부 웹 페이지를 표시할 수 있지만, 상위 수준 페이지를 통해 외부 웹 페이지를 탐색할 수는 없습니다.

Hh780594.wedge(ko-kr,WIN.10).gif 앱에 외부 웹 페이지를 표시하려면

웹 페이지를 표시하기 위한 iframe을 만듭니다. iframe 요소의 name 특성을 설정합니다.
```
<iframe name="targetFrame">
</iframe>
```
외부 웹 페이지에 대한 링크를 만듭니다. target 특성을 이전 단계에서 만든 iframe의 이름으로 설정합니다.
```
<p><a href="https://www.bing.com" target="targetFrame" >Search the web</a></p>

<iframe name="targetFrame">
</iframe>
```
앱을 실행하고 링크를 클릭하면 응용 프로그램 내부에서 링크가 열립니다. 페이지는 웹 컨텍스트에서 실행되며, 앱 페이지에 포함된 페이지에 비해 시스템에 대한 액세스가 제한됩니다.

iframe에서 외부 웹 페이지를 표시할 때 페이지에 문제가 있는 경우 사용자 지정 오류 페이지를 제공하는 것이 좋습니다. 이렇게 하는 방법에 대한 예제는 XHR, 탐색 오류 처리 및 URL 구성표 샘플(영문)을 참조하세요.

참고 성능상의 이유로 Windows 스토어 앱에서 원격 콘텐츠를 무한으로 캐시할 수 있습니다. 따라서 앱에서 최근 스크립트나 CSS 업데이트를 표시하지 못할 수 있습니다. 앱을 제거하고 다시 설치하면 캐시가 지워집니다. 다른 해결 방법으로는 쿼리 문자열에 임의 매개 변수를 포함하거나 캐시되지 않도록 웹 서버를 설정하는 방법이 있습니다. 자세한 내용은 Internet Explorer에서 캐싱을 방지하는 방법을 참조하세요.

로컬 및 웹 컨텍스트 정보

앱 자체에 포함하는 페이지는 앱의 로컬 컨텍스트에서 실행됩니다. iframe을 사용하여 원격 페이지로 이동할 때 해당 페이지는 웹 컨텍스트에서 실행되며 시스템에 대한 액세스가 제한됩니다.

로컬 컨텍스트 페이지 및 스크립트는 웹 컨텍스트의 페이지 및 스크립트와 다른 기능에 액세스합니다. 예를 들면 로컬 컨텍스트 페이지 및 스크립트는 Windows 런타임에 액세스하여 도메인 간 XHR 요청을 수행할 수 있습니다. 로컬 및 웹 컨텍스트 페이지 모두 JavaScript용 Windows 라이브러리에 액세스할 수 있습니다.

로컬 및 웹 컨텍스트 페이지에서 사용할 수 있는 서로 다른 기능에 대한 자세한 내용은 컨텍스트별 기능 및 제한을 참조하세요.

앱 패키지 매니페스트의 ApplicationContentUriRules 섹션을 사용하여 웹 컨텍스트의 페이지에 시스템의 지리적 위치에 대한 액세스(앱에 이 기능에 대한 액세스 권한이 있는 경우)와 클립보드에 대한 액세스를 제공할 수 있습니다.

Hh780594.wedge(ko-kr,WIN.10).gif 웹 컨텍스트 페이지에 추가 액세스를 제공하려면

웹 컨텍스트의 페이지에 추가 액세스를 제공하려면 콘텐츠 URI 규칙을 만듭니다. Microsoft Visual Studio 솔루션 탐색기에서 앱의 package.appxmanifest 파일을 마우스 오른쪽 단추로 클릭하고 디자이너 보기를 선택합니다. 매니페스트 디자이너가 나타납니다.
URI 열에서 포함할 웹 페이지의 URI를 지정합니다.

URI 일치를 지정하는 방법에는 몇 가지가 있습니다.
- 정확한 호스트 이름을 지정할 수 있습니다.
- 해당 하위 도메인의 URI가 포함되거나 제외된 호스트 이름을 지정할 수 있습니다.
- 정확한 URI를 지정할 수 있습니다.
- 쿼리 속성을 포함할 수 있는 정확한 URI를 지정할 수 있습니다.
- 부분 경로를 지정하고 포함 규칙에 대한 특정 파일 확장명을 나타내기 위해 와일드카드를 사용할 수 있습니다.
- 제외 규칙에는 상대 경로를 사용할 수 있지만 포함 규칙에는 사용할 수 없습니다.
예를 들면 URI를 https://www.bing.com/*로 설정합니다.

참고 하위 도메인이 여러 개 있는 경우 각 하위 도메인에 대해 와일드카드 하나를 사용해야 합니다. 예를 들어 "https://*.microsoft.com"은 "https://"any".microsoft.com"과 일치하지만 "https://"this"."any".microsoft.com"과 일치하지 않습니다.
규칙 드롭다운을 사용하면 URI의 포함 또는 제외 여부를 지정할 수 있습니다. 값을 포함으로 설정합니다.
새 URI 추가를 클릭하여 규칙을 추가합니다. 배경에서 디자이너가 패키지 매니페스트 파일의 ApplicationContentUriRules 섹션에 새 Rule 요소를 추가합니다.
```
      <ApplicationContentUriRules>
        <Rule Match="https://www.bing.com/*" Type="include" />
      </ApplicationContentUriRules>
```

웹에서 로컬 컨텍스트 페이지로 이동

로컬 컨텍스트 페이지에서 MSApp.addPublicLocalApplicationUri를 호출한 후, 웹 컨텍스트 페이지가 이동하도록 할 페이지의 URI로 전달하지 않으면 웹 컨텍스트 페이지에서 로컬 컨텍스트 페이지로 돌아갈 수 없습니다. 예를 들어 웹 컨텍스트 페이지가 앱의 "page2.html"이란 이름의 페이지로 이동하도록 하려면 다음 코드를 사용합니다.

MSApp.addPublicLocalApplicationUri("page2.html");

웹 컨텍스트 페이지가 이제 page2.html로 이동할 수 있습니다. 웹 컨텍스트 페이지에 액세스할 수 있도록 할 각 로컬 컨텍스트 페이지에 대해 이 메서드를 한 번씩 호출해야 합니다.

경고 쿼리 매개 변수를 허용하는 페이지가 있으며 웹의 어디에서나 이곳으로 이동할 수 있도록 하는 경우, 외부 웹 페이지에서 악의적인 쿼리 매개 변수를 전달할 수 있습니다.

다음을 통해 공유