iframe 요소(내부 프레임의 줄임말)는 다른 소스의 콘텐츠를 HTML 페이지에 삽입하도록 설계되었습니다. 예를 들어, iframe 사용 덕분에 자신만의 비디오 플레이어를 만들고 대용량 비디오 파일을 저장하는 것에 대해 생각할 수 없습니다. 대신 YouTube를 사용하고 iframe을 사용하여 웹 앱에 필요한 비디오를 추가할 수 있습니다.
YouTube 동영상에 iframe 사용
구체적인 예를 살펴보겠습니다. 비즈니스 프로세스에서 파일을 사용하는 방법에 대한 AppMaster YouTube 채널의 비디오를 볼 수 있는 페이지를 만들어 보겠습니다. 이렇게 하려면 캔버스에 iframe 요소를 배치하고 필요한 설정(예: 크기 및 들여쓰기)을 지정하고 Src 필드에서 원하는 비디오에 대한 링크를 설정해야 합니다.
동시에 YouTube는 초기에 이러한 비디오 삽입 가능성을 가정하고 프로세스의 최대 편의성을 위해 필요한 도구를 제공합니다. 동영상 아래에 있는 " Share " 버튼을 클릭하면 " Embed " 옵션을 사용할 수 있습니다.
YouTube는 페이지에 비디오를 배치하는 데 필요한 모든 HTML 코드를 제공하지만 우리의 경우 모든 코드가 중요한 것은 아니며 필요한 비디오에 대한 링크만 제공됩니다. 복사하여 iframe 설정에 배치해야 합니다.
기본 너비 및 높이 설정(560 및 315)도 여기에서 볼 수 있습니다.
응용 프로그램을 게시하고 이제 실제로 포함된 비디오가 있는지 확인할 수 있습니다.
마찬가지로 다른 소스의 다른 유형의 데이터를 포함할 수 있습니다. 예를 들어 지도를 추가합니다.
이러한 설정의 결과 두꺼운 점선 테두리가 있는 원으로 맵을 표시할 수 있습니다.
iframe에서 맞춤 HTML 사용
더 복잡한 옵션을 고려해 봅시다. 우리는 iframe용 html 페이지를 독립적으로 생성하고 타사 소스의 데이터를 사용하지 않습니다. 이렇게 하려면 캔버스에 RichtextEditor 요소를 추가합니다. 편리한 시각적 편집기의 도움과 HTML 코드의 직접 편집을 통해 HTML을 만들 수 있습니다.
에디터에서 생성된 모든 HTML을 파일로 저장한 후 iframe을 통해 표시할 수 있도록 만들어야 합니다. 버튼을 추가하고 클릭했을 때 실행될 해당 비즈니스 프로세스를 생성해 보겠습니다.
비즈니스 프로세스의 일부로 다음을 수행해야 합니다.
- Richtext Get Properties 블록을 사용하여 편집기에서 HTML을 가져옵니다.
- HTML을 바이트( To Bytes 로)로 변환합니다.
- Make File 블록을 사용하여 파일을 만듭니다. 파일을 만들려면 내용( Bytes , 이전 단계에서 얻었음)과 이름(무엇이든 가능하지만 설치되어 있어야 함)만 있으면 됩니다.
- 생성된 파일을 서버로 보내고 데이터베이스에 저장합니다( Server request POST /_files/ ).
- 생성된 파일의 ID 가져오기( Expand File - ID )
- ID를 문자열로 변환( To String )
- Concat String 을 사용하여 파일에 대한 링크를 수집합니다. 결과는 https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/와 같은 링크여야 합니다. 여기서 "vdjyien-app.apms.io"는 서버 주소이고 "dQhJVTYrToCqr9G4KWKRD"는 파일입니다. 이전 단계에서 얻은 ID입니다. 결과 링크는 브라우저에서 열립니다. 엔드포인트 자체를 수신하는 파일( GET /_files/:id/download/ )이 인증을 요구하지 않고 액세스를 위해 열려 있는지 확인하십시오.
- 링크가 정상이면 iframe에 링크를 전달하고 결과를 확인하는 것( iFrame Update Properties )만 남습니다.
이제 Richtext Editor 에서 생성된 모든 HTML을 데이터베이스에 저장하고 응용 프로그램에 표시할 수 있습니다. 따라서 iframe 블록을 사용하면 디자이너가 초기에 제공하지 않은 요소를 응용 프로그램에 추가하거나, 비표준 글꼴을 사용하거나, 사용자 정의 HTML 코드로 블록을 생성할 수도 있습니다.
