일하면서 알게된 것들을 기록합니다. 📝 언젠간 퍼즐이 맞춰지겠죠.
✅ 이슈 사항
유저의 로컬 PC에 설치될 런처에서 연결될 메뉴 링크들이 모두 외부 브라우저를 사용해 열려야했다.
<a href="https://kangdanne.tistory.com" target="_blank">go blog</a>쉽지 뭐. 하고 슥슥 작업을 했으나 생각치도 못한 이슈발생🥲
우리의 런처는 PC에서 하나의 App 상태로 열리게 되는 C#으로 만들어진 프로그램이었다. 고로 이곳에서의 새 창은 "윈도우 창"이 되었다. (CefSharp)
해서 팀장님께 보고를 드리고 업무를 배정 받게 되었다.
유저의 브라우저가 열리고 해당 링크로 연결되는 것이 목표!
👇 요건 백엔드 개발자분이 작업한 것 (예시)
... 중략 ...
public void OpenLink(string link) {
System.Diagnostics.Process.Start("explorer.exe", link);
return false;
}
... 중략 ...
위의 클래스는 CefSharp을 통하여 js로 호출할 수 있다. (자세한건 잘 모름)
- System.Diagnostics.Process.Start(); // C# 에서 외부 응용 프로그램을 호출하는 클래스
- "explorer.exe" // 호출될 응용 프로그램 = 웹 브라우저
CefSharp
- https://cefsharp.github.io/
- Chromium Embedded Framework(CEF)를 기반으로하는 웹 브라우저 컨트롤
- HTML5, JS ES6, CSS3 및 PDF 지원 하는 등의 장점
👇요긴 프론트 작업 (예시)
<!DOCTYPE html>
<html lang="en">
<head>
<script>
(async function() {
await CefSharp.BindObjectAsync("Myfunction");
})();
</script>
</head>
<body>
<!-- 수정 전 -->
<a href="https://kangdanne.tistory.com" onclick="Myfunction.openLink('event.target.link')" target="_blank">
go blog
</a>
</body>
</html>CefSharp.BindObjectAsync()를 통해, C#에 등록된 클래스를 호출할 수 있다.
그래서 onclick이벤트를 통해 해당 a태그의 href를 전달해 주었다.
✅ 두 분번 째 문제 발생
원하는 대로 브라우저를 통한 새 창이 떴지만, 기존의 윈도우 새창도 함께 떴다.
1. window 새창으로 뜸
2. 웹 브라우저 새창으로 뜸
2번만 필요.
태그 자체의 특성을 무시하여 시행착오를 겪었던 [React]Link컴포넌트 사용 시 TypeError 의 경험이 떠올랐다.
a 태그의 기본 기능 = 링크 이동.
a 태그의 기본 기능을 무효화 (처럼보이게)하고, onclick 이벤트에 원하는 기능 추가하는 방식으로 수정했다.
<!-- 수정 전 -->
<a href="#" onclick="Myfunction.openLink('https://kangdanne.tistory.com')">
go blog
</a>성공!
반응형
'D.evelop > MarkUp' 카테고리의 다른 글
| [HTML]오디오 재생 시 재생 중인 다른 오디오 정지 (HTML Audio DOM) (0) | 2023.12.01 |
|---|---|
| [HTML]canvas 사용법 - 기본 (rect, path, arc) (0) | 2023.05.27 |
| [HTML] redirect <meta http-equiv="refresh"/>로 해결한 사례 (0) | 2022.06.15 |
| video태그 - 자동 재생 autoplay에 대한 방법과 생각 (2) | 2022.03.15 |
| 유튜브 매개변수 - 영상 자동 재생, 연속재생, 컨트롤러 숨김 등 (0) | 2020.07.14 |
댓글