2013-07-03 2 views
0

iframe의 콘텐츠 CSS를 변경하려고했습니다. 즉, <img> 요소를 숨길 필요가 있습니다. 하지만 변경 cannnot .. 여기 샘플 코드입니다 :iframe에 동적으로로드 된 콘텐츠의 CSS를 제어하는 ​​방법은 무엇입니까?

<!DOCTYPE html> 

<html> 

<head> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 

</head> 

<body> 

    <iframe src="http://www.carsales.com.au/pls/carsales/!dealer_content.welcome?dealer_id=10978" width="80%" height="600" id='frameDemo'></iframe> 

<script> 
    $("#frameDemo").contents().find("img").css("display", "none"); 
</script> 



</body> 

</html> 

나를 도와주세요

종류가 몇 가지 문제가 있습니다 Niao Jina에

+0

[동일 출처 정책] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) – Antony

+0

예. CORS 문제이지만'.css ('display', 'none')'을'.hide() '로 바꾸십시오. – jedmao

답변

0

iframe이 소스가 당신을 제어 할 경우 :

간단한 대답은 당신이 정말로, 그것은 그 정확하기 때문에, 완전히 별도의 웹 페이지로 iframe을 취급 할 필요가 있다는 것입니다. 자체 CSS/JS 파일 등이 있어야하며 필요에 따라 조작 할 수 있습니다.

더 동적 인 방식으로 조작하려는 경우 iframe src URL에 변수를 추가 할 수 있습니다 (이미있는 dealer_id와 비슷 함). JS를 사용하여 변수 값/존재를 확인하고 추가합니다 그에 따라 이미지에 대한 특정 클래스. iframe이 소스

구성 예

iframe 허용 content.html imgvar = 숨길

iframe 허용있는 style.css - 여기 숨 스타일 정의 (예 : .hide {디스플레이 : 없음})?

iframe-script.js - src URL에서 변수를 확인하고 img에 hide 클래스가 있으면 추가합니다.

+0

안녕하세요. 도와 주셔서 감사합니다. 그러나 귀하의 설명에 대해 혼란 스럽습니다. 샘플 코드를 보내 주시겠습니까? 나를 위해 샘플 코드를 만드는 경우 매우 감사드립니다. 내 이메일 : [email protected] 귀하의 도움을 기다리고 있습니다! 감사합니다. Niao Jina – user2523824

+0

1 x 샘플 코드가 전송되었습니다. 희망이 있습니다. – Dayne

0

간주한다.

메인 문제는 사용자가 Same Origin Policy으로 실행 중입니다. 스크립트가 실행중인 페이지와 다른 출처의 프레임 내용에 대한 스크립트 액세스 권한이 없습니다.

프레임의 내용이 동일한 출처에서 발생한 경우 load 이벤트가 발생하기를 기다리고 싶습니다. 프레임 내용에. 예 : Live Copy | Live Source

var frame = $("<iframe>"); 
frame.load(frameLoaded); 
frame.attr("src", "http://jsbin.com/inanin/1"); 
frame.appendTo(document.body); 

function frameLoaded() { 
    frame.contents().find("img").hide(); 
} 

그러나 다시는 주요 문제는 SOP이다.

관련 문제