[인터넷 익스플로러 / 엣지]에서 링크 팝업이 blank로 뜹니다

JavaScript
#1

카카오링크로 공유하기 버튼을 만들어서
사용하고 있는데
어느 순간 부터
인터넷 익스플로러와 엣지에서
링크 팝업창이 blank로 나옵니다.

구글 크롬 / 네이버 웨일은 정상 작동합니다.

왜 그런가요 ;;

#2

인터넷 익스플로러를 관리자 권한으로 실행했을 때 window.open의 target name이 올바르게 적용되지 않아 링크 팝업창이 blank로 나오고, 별도의 탭으로 공유하기 창이 실행되는 이슈가 있었고, 오늘 배포된 1.25.4 버전에서 해당 이슈가 개선되었습니다.
1.25.4 버전에서도 같은 문제가 발생하는지 확인 부탁드려요.

#3

1.25.4 버전이 어떤 브라우저를 말하는 건가요?
아니면 api 버전을 말하시는건지요 ??

#4

Kakao JavaScript SDK 버전입니다. https://developers.kakao.com/docs/sdk 에서 확인하실 수 있습니다.

#5

감사합니다.

// !–
// 항상 최신 버전의 SDK를 사용합니다.
// -->
// script src="//developers.kakao.com/sdk/js/kakao.min.js">

이 코드 가져다 쓰면되지 않나요?

#6

링크 된게 아직 1.25.3버전 인것 같습니다~!!

#7

1.25.4 버전으로 확인됩니다… 캐시 초기화, 혹은 시크릿 창에서 테스트 부탁드려요.

#8

여전히 동일하게 현상이 지속됩니다. ㅠㅠ;;
엣지는 blank창이 뜨고 익스플로러는 아에 동작을 안합니다.

여전히 크롬과 웨일은 잘됩니다 ;;

#9

[Internet Explorer]
sendmsg의 URL의 주소가 http:/// 으로 시작해 Invalid로 판단, 해당 Url의 로직이 실행되지 않은 것이 원인으로 보입니다.
또한 iframe에 script를 불러와 실행하기 때문에 주소를 수정하더라도 브라우저(IE 등)에 따라 팝업 차단 이슈가 있을 것으로 보입니다.

[Edge]
카카오링크 웹공유 로직에서 POST 메소드를 사용하기 위해 document.body.appendChild 메소드를 호출하는데, document.body가 정의되지 않아 발생한 문제입니다.

[해결방법]
url을 수정하고 script jsp 파일을 html로 구성하더라도 팝업 차단의 이슈가 있기에 iframe을 사용하지 않고 해당 페이지에서 직접 Kakao.Link.sendDefault를 호출하길 권장드립니다.

#10 
<document<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>KakaoLink v2 Demo(Default / Feed) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  Kakao.init('YOUR APP KEY');
  Kakao.Link.createDefaultButton({
  container: '#kakao-link-btn',
  objectType: 'feed',
  content: {
    title: '딸기 치즈 케익',
    description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
    imageUrl: 'http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com'
    }
  },
  social: {
    likeCount: 286,
    commentCount: 45,
    sharedCount: 845
  },
  buttons: 
   });   
</script>

</body>
</html>

지금 http:///를 http:// 로 코드수정했더니 인터넷익스플로러와 엣지가 동일하게 블랭크 페이지를 띄우게 됬네요
iframe 때문에 그런거면 다른 방법을 찾도록 하도록 하겠습니다. iframe으로 넣어서 코드 수정이 불가피하겠네요 ㅠㅠ

또한 jsp 파일에 html 코드 넣어서 확인해보겠습니다.

근데 웃긴ㄱㅔ… 카카오스토리는 열리는데 카톡이 안열리는게 참…
똑 같은 iframe 쓰는데 왜 그런지…;;

#11

SCRIPT5007: 정의되지 않음 또는 null 참조인 ‘appendChild’ 속성을 가져올 수 없습니다.
kakao.min.js (87,26504)

라고 인터넷익스플로러 콘솔창에 뜨는데 어떻게 해야 될까요 ?

#12

위에 언급했던 [Edge]에서 오동작이 나던 원인과 같습니다.
document.body가 정의되지 않아 발생한 문제로 iframe에 지정한 script jsp 파일을 script만이 아닌 full html으로 구성해주시기 바랍니다.

또한 iframe을 권장하지 않는 것은 브라우저 정책에 따라 팝업 차단이 될 수 있기 때문에(이 현상은 현재 IE에서 스토리를 열 때도 확인 가능합니다) 입니다. iframe가 처음의 원인은 아니므로 이 점 참고 바랍니다.

#13

full html 사용해도 카카오톡 링크가 안됩니다. ㅠ_ㅠ;;