때때로 개발자는 작업을 해결해야합니다-사이트에 연결하는 방법iframe이> 태그와 자바 스크립트를 사용하는 상위 사이트. 예를 들어 즉시 새로 고침하는 방법iframe이> 부모 사이트에서 어떤 작업이 수행 되었습니까? 그것이 과거에는 문제 였지만 지금은 HTML5 기능을 사용할 수 있기 때문입니다. 다음 예제를 살펴 보겠습니다.ul> 아이템!
- 따라서 상위 사이트에는ul> 및 '.providers_list 리', 인터페이스의 논리에 따라 삽입 또는 삭제되는 js 이벤트가 있습니다.li> 그것으로부터ul>. 그리고있는 사이트에서iframe이> 우리는 텍스트를 받고 싶습니다 그 링크의 거기에 있습니다.
- 상위 사이트에 1 개의 js 파일을 생성하고 사이트에 1 개의 js 파일을 생성합니다.iframe id = "mdtf_csp_frame">
- 부모 js 파일 다음 코드에 삽입하십시오.12345678910jQuery(function () {var iframe = jQuery('#mdtf_csp_frame');setInterval(function () {var message=new Array();jQuery('.providers_list li').each(function (i, o) {message.push(jQuery.trim(jQuery(o).find('a').eq(0).text()));});iframe[0].contentWindow.postMessage(message.join(', '), '*');}, 2000);});
- 페이지가로드 된 후 시작합니다. 세트간격 2 초마다 공급자 목록을 확인 하고 각 링크에서 텍스트를 가져 오는 함수
- 그런 다음 HTML5 기능 사용 포스트 메시지 수집 된 데이터를iframe이>
- 태그에있는 사이트에서iframe이> 다음 코드를 사용해야합니다.123456789101112131415var onmessage = function (e) {var data = e.data;//var origin = e.origin;if (document.getElementById('textarea.wpbdp-field-14') !== null) {document.getElementById('textarea.wpbdp-field-14').readOnly = true;document.getElementById('textarea.wpbdp-field-14').innerHTML = data;}};if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', onmessage, false);} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', onmessage);}
- wpbdp-14 is 텍스트 영역 태그에있는 사이트iframe이> 그리고 우리는 상위 사이트 목록 '에서 2 초마다 새로운 정보를 추가합니다..providers_list 리'.
그게 다입니다. 다른 경우에 사용할 수있는 동일한 원칙 ...