서버와의 통신을 통해 모달html을 불러오는 방법...

Question

페이지 내에 모달을 띄우려고 시도하다가모달 내에 담겨야 하는 내용이 너무 많아서 UI가 계속 깨지게 되었습니다.아예 새창을 띄우자! 생각해서window.open()을 썼는데,url을 적어야 합니다!물론 url을 서버 api로 설정하면 페이지를 내려주는 url을 입력하면 잘 뜹니다.하지만 이 모달은 버튼을 눌렀을 때만 호출되고 접근이 불가해야 하는데, 그러려면 url을 감추어야 하지 않겠습니까?검색해봤더니 그럴 수는 없다는 군요...그래서 다음 주소 API를 어케 쓰나 봤더니얘는 모달 url이 없어요. 공백으로 두는 것 같습니다.그리고 주소창을 그리는 자바스크립트를 내부에서 돌리는 것 같습니다. createElement도 보이고요.그렇다면 저도 javascript로 내부에서 그려야 할까 생각하다가걍 빈창에서 ajax 등의 함수로 페이지만 통신으로 불러오면 될 것 같았습니다. const seojiModalOpen = function() { var seojiModal = window.open("", "_blank", "location=no, menubar=no, toolbar=no"); var seojiDocument = seojiModal.document; seojiDocument.open(); fetch("/admin/book/seojiModalTest") .then(function(response) { if (response.ok) { return response.text(); } throw new Error('Failed to load modal HTML'); }) .then(function(modalContent) { seojiDocument.write(modalContent); seojiDocument.addEventListener('DOMContentLoaded', function() { var scriptElements = seojiDocument.getElementsByTagName('script'); for (var i = 0; i < scriptElements.length; i++) { var script = seojiDocument.createElement('script'); script.textContent = scriptElements[i].textContent; seojiDocument.body.appendChild(script); } }); }) .catch(function(error) { console.error(error); }); };해당 코드는 chatGPT의 도움을 받았습니다.아무튼 이렇게 하니 페이지는 나옵니다.문제는 이 새로 뜬 팝업창의 네트워크에는 데이터를 내려준 흔적이 없고javascript도 동작하지 않습니다. html의 헤더에 cdn은 제대로 들어있는데 동작을 안합니다.console.log를 script태그 안에 쓰고 확인해보면 그건 출력이 됩니다.alpine.js를 사용하고 있는데, 제가 알기로는 지연로딩을 하여서 페이지가 다 그려진 뒤에 실행되는 것으로 알고 있습니다.제 모달은 이 alpine.js로 작성된 코드입니다.

국립중앙도서관 서지 정보 검색

추측컨대, 빈 창에서 비동기 요청을 통해 팝업창 안에 html을 불러온데서문제가 생긴 것일까요?

아케케키케 · Answer

ㅗㅜㅑ 소스 엄청 기네욥

뎅이 · Answer

이런 코드를 보면 저는 악순환이라는 말이 떠오릅니다.일단 팝업을 쓰지 마세요. 차단되는 경우가 많습니다. Div로 띄우고 그 안에 IFrame을 넣으세요.Dom 이벤트나 Script 조작을 직접 주입하지 마세요. 기술과 복잡도가 너무 과합니다.Child 창에서 Parent 창 (opener) 에 직접 접근하지 마세요. 그냥 처음부터 데이터를 넘겨주세요.내가 뭘 원하지? 부터 출발해서 가장 빠른 (짧은) 길을 택하세요.이것 위해 딴게 필요하고... 방식의 꼬리에 꼬리를 무는 Needs는 절대 피하세요.

서버와의 통신을 통해 모달html을 불러오는 방법...

2개의 답변

Q&A 목록