윅스 (Wix) 코딩 - HTML 요소 (Wix Code: Working with the HTML Element)
설명)
HTML 요소를 사용하면 원시 HTML을 추가하거나 페이지 내에 다른 웹사이트를 포함시킬 수 있습니다. 페이지 요소와 HTML 요소의 코드 간에 데이터를 전달할 수도 있습니다. 즉, 윅스 코드(Wix Code)를 사용하는 경우에도 일반적으로 직접할 수 없는 일을 하기 위해 모든 상황에서 사용할 수 있습니다.
일반적으로 사이트 페이지의 HTML 및 전체 코드에 액세스할 수는 없습니다. 타사 코드를 사이트에 추가하려는 경우 때로는 제한적일 수 있습니다. HTML 요소를 사용하면 페이지에 원시 HTML을 추가하여 이러한 제한을 극복할 수 있습니다.
HTML 요소는 페이지의 다른 요소에 직접 액세스할 수 없는 샌드 박스 환경(iframe)을 만듭니다. 그러나 페이지 요소와 HTML 요소의 코드 간에 데이터를 전달할 수는 있습니다. 즉, 나머지 페이지에 액세스해야하는 위젯이나 라이브러리는 HTML 요소에서 작동하지 않습니다. 그러나 위젯이나 라이브러리가 페이지 요소에 데이터를 보내거나 페이지 요소에서 데이터를 수신해야하는 경우 작동하도록 코드를 작성할 수 있습니다.
노트 :
HTML 요소의 제한 사항에 대한 자세한 내용은 HTML 코드의 지침 및 제한 사항 및 사이트 요소 포함을 참조합니다.
다른 사이트 퍼가기 (Embedding Another Site)
일반적으로 사이트에 다른 사이트를 퍼가려면 HTML 요소를 추가하고 설정을 사용하여 포함하려는 웹 사이트의 주소를 추가합니다. 예를 들어 사이트에 Wikipedia 페이지를 삽입하려면 페이지에 HTML 요소를 추가하고 웹 사이트 주소를 삽입할 페이지의 URL로 설정합니다.
경고 :
위 지침을 사용하여 포함하는 사이트는 HTTP가 아닌 HTTPS 프로토콜로 시작하는 URL이 있는 사이트여야 합니다. HTTP 프로토콜로 시작하는 URL이 있는 사이트를 포함시키려고하면 사이트가 미리보기 모드로 작동할 수 있지만 게시된 사이트에서는 작동하지 않습니다.
HTTP 프로토콜로 시작하는 URL로 사이트 삽입 (Embed a site with a URL that begins with the HTTP protocol)
HTTP 프로토콜로 시작하는 URL이 있는 사이트를 포함시키려면 다음 중 하나를 수행합니다.
- HTTPS 프로토콜을 사용하여 사이트를 삽입합니다.
a. 추가 메뉴의 추가 섹션에서 HTML 코드 요소를 페이지로 드래그합니다.
b. HTML 요소의 설정 패널에서 코드를 선택합니다.
c. 아래 코드를 추가합니다.
d. 코드를 편집하여 포함하려는 사이트의 URL ( "http"에 "s"가 추가됨)과 원하는 크기를 포함하도록 편집합니다.
<iframe src="https://sitetoembed.com" width="100%" height="500" frameborder="0" scrolling="auto" allowtransparency="true"> </iframe>
- 사이트의 SSL 보호를 해제합니다. (노트 : 이렇게하면 사이트가 안전하지 않게됩니다.)
a. 에디터 메뉴에서 사이트를 선택하고 사이트 관리자를 선택합니다.
b. 사이트 설정 패널에서 도메인을 선택하고 SSL 끄기를 클릭하니다.
c. 추가 메뉴의 추가 섹션에서 HTML 코드 요소를 페이지로 드래그합니다.
d. HTML 요소의 설정 패널에서 웹사이트 주소를 삽입할 페이지의 URL로 설정합니다.
위젯 삽입하기 (Embedding a Widget)
일반적으로 사이트에 위젯을 포함하려면 위젯 작성자가 제공한 코드를 추가해야합니다. 사이트에 임베드할 수 있는 위젯 유형과 제대로 작동하지 않는 위젯 유형 중 일부를 살펴 보겠습니다.
독립 실행형 위젯 (Standalone Widget)
사이트에 대한 정보를 알 필요가 없는 위젯은 일반적으로 코드가 HTML 요소에 붙여 넣을 때 작동합니다.
예를 들어 AccuWeather Current Weather Widget은 현재 날씨를 표시하는 위젯입니다. 페이지 요소에 대해 알 필요가 없기 때문에 HTML 요소를 사용하여 페이지 요소를 사이트에 추가할 수 있습니다.
AccuWeather 현재 날씨 위젯을 페이지에 추가하려면,
- [추가] 메뉴의 [추가] 섹션에서 HTML 코드 요소를 페이지로 드래그합니다.
- 현재 날씨 위젯 만들기 페이지로 이동하여 위젯의 매개 변수를 설정하고 코드 스니펫을 가져옵니다.
- HTML 요소의 설정 패널에서 코드를 선택하고 위젯 코드를 붙여 넣습니다.
종속 위젯 (Dependent Widget)
HTML 요소에 코드를 붙여 넣을 때 페이지의 Wix 요소에 대해 알아야하는 위젯은 작동하지 않습니다.
예를 들어, 구글(Google)의 웹사이트 번역기(Website Translator)는 페이지의 내용을 다른 언어로 번역하는 위젯입니다. 단어를 번역하려면 페이지 요소에 대해 알아야하므로 HTML 요소를 사용하여 사이트에 추가하고 페이지의 나머지 부분을 번역할 수는 없습니다. 그러나 HTML 요소에 추가하고 요소 자체의 내용을 변환할 수 있습니다.
자바스크립트(JavaScript) 라이브러리 사용 (Using a JavaScript Library)
HTML 요소에서 사용할 수 있는 많은 자바스크립트(JavaScript) 라이브러리가 있습니다. 그러나 위젯 관련 제한 사항은 라이브러리에도 적용됩니다. 추가하는 라이브러리는 HTML 요소 내부의 요소와만 상호 작용할 수 있습니다. 페이지 코드에서 라이브러리와 상호 작용하거나 라이브러리의 페이지 요소와 상호 작용하려면 아래 설명된 메시징 모델을 사용해야합니다.
element 예를 들어, Chart.js는 차트를 만드는 데 사용할 수 있는 자바스크립트(JavaScript) 라이브러리입니다. <script> 태그를 사용하여 Chart.js 라이브러리에 링크하고 페이지의 HTML 요소에 차트를 표시하는 HTML 및 자바스크립트(JavaScript)를 작성할 수 있습니다. 페이지와의 상호 작용이 차트에 영향을 미치고 차트와의 상호 작용이 페이지에 영향을 미칠 수 있도록 페이지와 HTML 요소간에 메시지를 보낼 수도 있습니다.
Chart.js를 사용하여 차트를 만드는 사이트의 작동 예제를 보려면 차트 예제를 참조합니다.
메시지 (Messaging)
코드를 사용하여 페이지와 HTML 요소간에 메시지를 주고받습니다. 유효한 자바스크립트(JavaScript) 유형으로 데이터를 송수신할 수 있습니다.
페이지 코드에서 HTML 요소로 메시지 보내기 (Sending a Message from Page Code to an HTML Element)
HTML 요소의 postMessage( ) 함수를 사용하여 페이지에서 HTML 요소로 메시지를 보냅니다.
예를 들어, 페이지에 ID가 myHtmlElement인 HTML 요소가 있는 경우 :
$w("#myHtmlElement").postMessage("Message for HTML Comp");
HTML 요소에서 페이지 코드로부터 메시지 받기 (Receiving a Message from Page Code in an HTML Element)
요소의 코드에서 window.onmessage 이벤트에 대한 이벤트 핸들러를 만들어 HTML 요소에 메시지를 수신합니다. HTML <script> 태그 내에 이벤트 핸들러를 만듭니다. 이벤트 핸들러의 이벤트 매개 변수의 data 속성을 가져와서 받은 데이터를 가져옵니다.
예를 들어, HTML 요소의 HTML 코드 :
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
//...
</script>
HTML 요소에서 페이지 코드로 메시지 보내기 (Sending a Message from an HTML Element to Page Code)
요소의 코드에서 postMessage( ) 함수를 사용하여 HTML 요소에서 메시지를 보냅니다. 일반적으로 함수 내에서 postMessage( )를 호출하게됩니다.
예를 들어, HTML 요소의 HTML 코드 :
<script type="text/javascript">
//...
function respond() {
window.parent.postMessage("Message for page code", "*");
}
</script>
페이지 코드에서 HTML 요소의 메시지 수신 (Receiving a Message from an HTML Element in Page Code)
HTML 요소의 onMessage( ) 함수를 사용하여 페이지 코드에서 이벤트 핸들러를 바인딩하는 메시지를 수신합니다. 이벤트 핸들러의 이벤트 매개 변수의 data 속성을 가져와서 받은 데이터를 가져옵니다.
예를 들어, 페이지에 ID가 myHtmlElement 인 HTML 요소가있는 경우 :
$w("#myHtmlElement").onMessage( (event) => {
let receivedData = event.data;
} );
예제 - 메시징 설명 (Example - Messaging Demonstration)
이 간단한 예제에서는 양방향으로 메시지를 보내고받는 것을 보여줍니다. 우리는 두면이 비슷한 페이지를 만듭니다. 한면에는 윅스(Wix) 페이지 요소가 내장되어 있습니다. 다른면은 HTML 요소에 HTML로 빌드됩니다.
아래에 표시된 페이지의 왼쪽은 윅스(Wix) 페이지 요소로 생성됩니다. 그것은 다음을 포함합니다 :
- HTML 요소로부터 받은 메시지를 표시하는 데 사용되는 텍스트 요소
- HTML 요소에 메시지를 보내는 데 사용되는 버튼 요소
- HTML 요소에 보낼 메시지를 입력하는 데 사용되는 텍스트 입력 요소
아래 표시된 페이지의 오른쪽은 HTML 요소로 생성됩니다. 요소는 왼쪽에있는 요소를 모방한 HTML을 포함합니다.
이 설정을 사용하여 페이지 코드와 HTML 요소간에 메시지를 보내고 받는 방법을 보여줍니다. 양쪽에 텍스트를 입력하고 메시지 보내기 버튼을 클릭하면 상대방의 텍스트 라벨에 텍스트가 표시됩니다.
페이지 코드 (Page Code)
코드 패널에 다음 코드가 추가됩니다. 여기에는 두 부분이 있습니다.
먼저 페이지의 onReady( ) 이벤트 핸들러에서 페이지가 HTML 요소로부터 메시지를 받을 때 실행되는 이벤트 핸들러를 설정합니다. 이벤트 핸들러는 페이지의 텍스트 요소의 텍스트를 HTML 요소에서 보낸 데이터로 설정합니다.
그런 다음 페이지의 버튼에 대한 이벤트 핸들러에서 HTML 요소에 메시지를 보냅니다. 메시지의 데이터는 텍스트 입력의 값입니다.
$w.onReady(function () {
// when a message is received from the HTML element
$w("#myHtmlElement").onMessage( (event) => {
$w("#text1").text = event.data;
} );
} );
export function messageSendButton_onClick() {
// send message to the HTML element
$w("#myHtmlElement").postMessage($w("#textInput1").value);
}
HTML 요소 코드 (HTML Element Code)
다음 코드는 코드 편집 버튼을 사용하여 HTML 요소에 추가됩니다. 여기에는 3개의 주요 섹션이 있습니다.
<body> 태그에서 우리는 페이지를 구성하는 HTML 요소를 정의합니다. 윅스(Wix) 페이지 요소를 사용하여 만든 것과 비슷합니다.
- 페이지 코드에서받은 메시지를 표시하는 데 사용되는 <span>
- 페이지 코드로 메시지를 보내는 데 사용되는 <button>
- 페이지 코드로 보낼 메시지를 입력하는 데 사용되는 <input type = "text">
<style> 태그에서는 위에서 언급한 HTML 요소에서 사용되는 스타일을 정의합니다. 이러한 스타일은 실제로 필요하지 않습니다. 우리는 단지 윅스(Wix) 페이지 요소의 디자인을 모방하기 위해 그것들을 사용하고 있습니다.
<script> 태그에서 우리는 메시징 로직을 정의합니다. 메시징 논리에는 두 부분이 있습니다.
첫째, HTML 요소가 로드될 때 onMessage 속성을 요소의 <span> 텍스트를 페이지 코드에서 보낸 데이터로 설정하는 이벤트 핸들러로 설정합니다. 이 이벤트 핸들러는 HTML 요소가 페이지 코드에서 메시지를 받을 때마다 호출됩니다.
그런 다음 HTML 요소의 버튼을 클릭하면 button_click( ) 함수가 호출됩니다. 우리는 button_click( ) 함수를 정의하여 HTML 요소의 텍스트 입력에 있는 텍스트를 페이지 코드로 전송된 데이터로 보냅니다.
<html>
<head>
<style>
.button {
background-color: #155DE9;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-family: 'Arial';
}
.label {
font-family: 'Arial';
}
.input {
font-size: 14px;
}
</style>
<script type="text/javascript">
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
document.getElementById("theLabel").innerHTML = event.data;
}
};
// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById("theMessage").value, "*");
}
</script>
</head>
<body>
<span id="theLabel" class="label">HTML Label</span>
<br/><br/>
<button class="button" onclick="button_click()">< Send Message</button>
<br/><br/>
<input type="text" class="input" id="theMessage">
</body>
</html>
연관된 토픽)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
https://support.wix.com/en/article/wix-code-working-with-the-html-element
댓글