브라우저가 window.open을 가로채는 솔루션에 대한 자세한 설명

최근에 프로젝트를 진행하다가 window.open의 사용이 브라우저에 의해 차단되는 상황이 발생했는데, 이로 인해 페이지가 자신의 환경에서는 공개될 수 있지만 사용자 입장에서는 마음이 편치 않았습니다. 차단을 통과하는 데 필요합니다. 게다가 차단이 발생하면 많은 초보자들이 무슨 일이 일어나고 있는지 모르고 차단된 페이지를 어디에서 봐야할지 모릅니다. 정말 안타깝습니다~~.

또한 window.open이 사용자에 대한 이벤트를 트리거하거나 로드될 때 차단되지 않는 것을 확인할 수 있습니다. 팝업 코드가 ajax 또는 비동기 코드로 이동되면 즉시 차단됩니다. .

브라우저는 사용자가 아닌 작업으로 인해 생성된 새 팝업 창을 감지하면 이를 차단합니다. 브라우저는 이 페이지가 사용자가 보고 싶어하는 페이지가 아니라고 생각하기 때문입니다.

예를 들어 js에서 직접 실행되는 경우 다음 코드는 다음과 같습니다.

JS 코드:

 //페이지 직접 열기 window.open('//www.baidu.com', '_blank');

브라우저 ie8 크롬 40 파이어폭스 34 오페라 27 사파리 5.1.7

NNYYY 팝업을 방지할지 여부와 다음 코드에 대해:

JS 코드:

 document.body.addEventListener('click', function() { window.open('//www.baidu.com', '_blank'); });

모든 브라우저는 이를 차단하지 않습니다.

정리하자면 브라우저마다 차단 시점에 대한 판단이 다르고, Ajax 콜백에 배치된 코드에 대한 응답도 다르기 때문에 여기서는 자세히 설명하지 않겠습니다. 그러나 프로그래머는 브라우저가 코드의 팝업 창을 가로채기를 원하지 않습니다.

1. 대신 태그를 사용하세요

다음 함수가 주어지면 이 함수를 클릭 이벤트 콜백에 바인딩하면 대부분의 브라우저에서 창 팝업을 가로채는 것을 방지할 수 있습니다.

JS 코드:

 function newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', url) a.setAttribute('target', '_blank'); ', id); // 반복 추가 방지 if(!document.getElementById(id)) document.body.appendChild(a);

2. 양식의 제출 방법을 사용하여 페이지를 엽니다.

이 방법을 사용하려면 from을 구성한 다음 js 코드로 양식 제출을 트리거하고 해당 양식을 새 페이지에 제출해야 합니다. 따라서 여기에는 작성하지 않겠습니다. 해결책.

위의 두 가지 메소드는 ajax 콜백 함수에 배치하기에 적합하지 않습니다. 콜백 함수에 배치하면 여전히 브라우저에서 가로채게 됩니다.

3. 궁극적인 해결책 - 먼저 창을 띄운 후 리디렉션

세 번째 해결 방법은 실제로 해결 방법입니다. 핵심 아이디어는 먼저 사용자 클릭을 통해 페이지를 연 다음 페이지를 리디렉션하는 것입니다. 샘플 코드는 다음과 같습니다.

JS 코드:

 xx.addEventListener('click', function () { // 페이지를 엽니다. 여기서 프롬프트 페이지를 사용하는 것이 가장 좋습니다. var newWin = window.open('loading page'); ajax().done(function() { // 대상 페이지로 직접 반복 newWin.location.href = 'target url' });

위의 방법은 실제로 두 개의 주소를 오픈하기 때문에 첫 번째 주소를 오픈할 때 '현재 페이지가 로딩 중입니다. 잠시만 기다려주세요'와 유사한 메시지를 주시는 것이 좋습니다. . 실제 대상 페이지를 두 번 열지 않고 사용자가 페이지 리디렉션을 알 수 있도록 하는 간단한 프롬프트 페이지입니다.

해결 방법 2:

 <a href=javascript:; onclick=dialog();>팝업 창 클릭</a><script>functionDialog(){ $.ajax({ url: 'url', type: 'POST', dataType: 'json', async: false, // 이는 동기 데이터로 정의되어야 합니다: {param1: 'value1'}, Success: function(data){ window.open(data.url, '_blank'); 팝업창} })} </script>

이 방법의 단점:

실제 테스트는 대부분의 브라우저의 차단 문제를 해결할 수 있지만 보안 소프트웨어의 차단은 해결할 수 없습니다. (360은 차단하지 않지만 QQ Butler는 차단합니다.)

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.