Go back
사용 방법 문의
[콘텐츠 관리 (pApp)] re:에디터 코드 사용 시 외부 링크 연결
양현재앤컴퍼니주식회사
2024-09-06
지난 문의 관련입니다.
https://care.publ.biz/channels/L2NoYW5uZWxzLzExMQ/A00003/posts/422224
페이지 에디터 코드 위젯 사용 시, <a href> 등 링크를 걸면 현재 창에서 생성할 수 없고, 이미지와 같이 해당 코드 위젯 영역 내에서 생성됩니다. target 중 top, parent는 동작하지 않고, blank만 동작하는데, 새 창이 아닌 현재창에서 띄울 수 없나요?
ps. 콘솔 내 [디자인 > 고급 기능 코드] 중 자잘한 오류인 듯 한데, 커서 위치와 실제 위치가 다르게 나옵니다.
3 Comments
publ 운영팀
· 2 years ago
안녕하세요, 양현재앤컴퍼니주식회사님
publ 운영팀입니다. 페이지 에디터 iframe 기능에 대한 추가 질문을 주셨는데요, 내부적으로 가능한지 확인해보느라 답변이 늦어진 점 양해 부탁드립니다. iframe 기능을 사용하여 채널 내 어떤 외부 링크를 걸었을 때 새 창으로 열리지 않고 현재 창으로 불러오고 싶다고 하신 것으로 이해하였는데요,
기본적으로 iframe 내에서 외부 페이지를 제어하거나 현재 창을 열게 하는 것은 보안상의 이유로 웹 브라우저에서 막혀 있습니다. 외부 페이지는 iframe을 삽입한 사이트와 도메인이 다를 경우, 보안 정책(CORS 같은)이 적용되어 조작이 제한됩니다. 다만, 고급 기능의 JavaScript와 에디터의 코드 삽입 CB를 함께 작성하여 원하는 페이지를 내부로 이동되게 하는 방법이 있어 전달드립니다.
아래의 항목을 따라 설정해주세요.
publ 운영팀입니다. 페이지 에디터 iframe 기능에 대한 추가 질문을 주셨는데요, 내부적으로 가능한지 확인해보느라 답변이 늦어진 점 양해 부탁드립니다. iframe 기능을 사용하여 채널 내 어떤 외부 링크를 걸었을 때 새 창으로 열리지 않고 현재 창으로 불러오고 싶다고 하신 것으로 이해하였는데요,
기본적으로 iframe 내에서 외부 페이지를 제어하거나 현재 창을 열게 하는 것은 보안상의 이유로 웹 브라우저에서 막혀 있습니다. 외부 페이지는 iframe을 삽입한 사이트와 도메인이 다를 경우, 보안 정책(CORS 같은)이 적용되어 조작이 제한됩니다. 다만, 고급 기능의 JavaScript와 에디터의 코드 삽입 CB를 함께 작성하여 원하는 페이지를 내부로 이동되게 하는 방법이 있어 전달드립니다.
아래의 항목을 따라 설정해주세요.
publ 운영팀
· 2 years ago
[스크립트 작성]
1. 콘솔 내 [디자인] - [고급 기능] - [JavaScript]를 눌러주세요.
2. Head 영역에 다음 코드를 넣어주세요. ==========
window.addEventListener("message", function(event) { if (event.origin !== "https://내채널주소") { return; }; if (event.data === "navigate-to-naver") { window.location.href = "https://www.naver.com"; } }, false);
========== 이 때, 내 채널 주소는 "https://abcd.com” 처럼 입력 (Origin)합니다.
window.location.href = "내가 이동시킬 주소” 를 입력합니다.
1. 콘솔 내 [디자인] - [고급 기능] - [JavaScript]를 눌러주세요.
2. Head 영역에 다음 코드를 넣어주세요. ==========
window.addEventListener("message", function(event) { if (event.origin !== "https://내채널주소") { return; }; if (event.data === "navigate-to-naver") { window.location.href = "https://www.naver.com"; } }, false);
========== 이 때, 내 채널 주소는 "https://abcd.com” 처럼 입력 (Origin)합니다.
window.location.href = "내가 이동시킬 주소” 를 입력합니다.
publ 운영팀
· 2 years ago
[에디터 - 코드 삽입 CB 작성]
1. 페이지 - [디자인 편집]에 접근해 주세요.
2. 코드 삽입 컴포넌트 블록을 추가해주세요.
3. 코드 내용에 아래 코드를 넣어주세요. ==========
<div id="navigate-button" style="cursor: pointer;"
> Go to Link
</div> <script> document.getElementById("navigate-button").addEventListener("click", function() { if (window.parent) { window.parent.postMessage("navigate-to-naver", "https://내채널주소"); } }); </script>
========== 이 때, iframe 내부에서 부모 페이지로 메시지를 보냄 내 채널 주소에 https://abcd.com/ 처럼 작성합니다. 원하시는 결과물이 나오는지 한 번 확인 부탁드리며, 답변이 도움되셨길 바랍니다.
추가 문의나 이 외에도 궁금한 사항이 있으시면 언제든 편히 남겨주세요.
감사합니다! publ 운영팀
1. 페이지 - [디자인 편집]에 접근해 주세요.
2. 코드 삽입 컴포넌트 블록을 추가해주세요.
3. 코드 내용에 아래 코드를 넣어주세요. ==========
<div id="navigate-button" style="cursor: pointer;"
> Go to Link
</div> <script> document.getElementById("navigate-button").addEventListener("click", function() { if (window.parent) { window.parent.postMessage("navigate-to-naver", "https://내채널주소"); } }); </script>
========== 이 때, iframe 내부에서 부모 페이지로 메시지를 보냄 내 채널 주소에 https://abcd.com/ 처럼 작성합니다. 원하시는 결과물이 나오는지 한 번 확인 부탁드리며, 답변이 도움되셨길 바랍니다.
추가 문의나 이 외에도 궁금한 사항이 있으시면 언제든 편히 남겨주세요.
감사합니다! publ 운영팀