JQuery를 사용하여 iframe 컨텐츠에서 CSS를 변경하십시오

이 게시물에서는 다른 도메인에서 iframed 컨텐츠의 CSS를 변경하려는 시도에 대한 실패한 시도에 대한 문서도 포함했습니다. 또한 동일한 도메인의 iframe에서 CSS를 변경하는 방법에 대한 정보는 (내가 아는 한) 프록시 패스 나 그와 같은 경우에 수행 할 수 없습니다.

크로스 도메인 노력 작동 방식 : 비교 url

결과

이유 http://www.example.com/dir/page.html 성공 동일한 프로토콜 및 호스트 http://www.example.com/dir2/other.html 성공 동일한 프로토콜 및 호스트 http://www.example.com:81/dir/other.html 실패 동일한 프로토콜 및 호스트이지만 다른 포트 https://www.example.com/dir/other.html 실패 다른 프로토콜 http://en.example.com/dir/other.html 실패 다른 호스트 http://example.com/dir/other.html 실패 다른 호스트 (정확한 일치) http://v2.www.example.com/dir/other.html 실패 다른 호스트 (정확한 일치) iframe을 삽입하십시오 : 이 방법은 나에게 효과가 없었습니다. 이 방법은 저에게 효과적이었습니다. 이 방법은 저에게 효과적이었습니다. var iframe = top.frames [name]. 문서; var css =” ‘ iframe 컨텐츠에서 CSS 변경에 대해 자주 묻는 질문 왜 다른 도메인에서 iframe의 CSS를 변경할 수 없는가? 이것은 웹 보안의 중요한 측면 인 "동일 원인 정책"때문입니다. 한 페이지에서 스크립트가 다른 도메인에서 다른 페이지의 속성에 액세스하거나 수정하는 것을 방지합니다. 이 정책은 잠재적으로 악의적 인 스크립트가 다른 웹 페이지에서 민감한 데이터에 액세스하는 것을 방지하기 위해 구현됩니다.

Cross-Domain iframe의 CSS를 수정하기위한 해결 방법이 있습니까?

<span>Ways to to change CSS in an iframe
</span><span>Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
</span>
<span><span>This</span> method didn't work for me.
</span><span>[js]
</span><span>var text = 'hi';
</span><span>var content = "" + text + "";
</span>
<span>var iframe = document.createElement("iframe");
</span>iframe<span>.src = ' document.body.appendChild(iframe);
</span>
<span>var doc = iframe.document;
</span><span>if(iframe.contentDocument)
</span>doc <span>= iframe.contentDocument; // For NS6
</span><span>else if(iframe.contentWindow)
</span>doc <span>= iframe.contentWindow.document; // For IE5.5 and IE6
</span><span>// Put the content in the iframe
</span>doc<span>.open();
</span>doc<span>.writeln(content);
</span>doc<span>.close();
</span>
doc<span>.getElementsByTagName("body").style.backgroundColor = 'red';</span>

불행히도 위에서 언급 한 보안상의 이유로 인해 CSS를 수정하는 직접적인 방법은 없습니다. 그러나 iframe의 소스 페이지를 제어 할 수있는 경우 부모 페이지에서 메시지를 받기 위해 스크립트를 추가하고 필요한 변경 사항을 수행 할 수 있습니다.

<span>var cssLink = document.createElement("link")
</span>cssLink<span>.href = "style.css";
</span>cssLink <span>.rel = "stylesheet";
</span>cssLink <span>.type = "text/css";
</span>frames<span>['frame1'].document.body.appendChild(cssLink);</span>

<span>var frm = frames['frame'].document;
</span><span>var otherhead = frm.getElementsByTagName("head")[0];
</span><span>var link = frm.createElement("link");
</span>link<span>.setAttribute("rel", "stylesheet");
</span>link<span>.setAttribute("type", "text/css");
</span>link<span>.setAttribute("href", "style.css");
</span>otherhead<span>.appendChild(link);</span>

iframe이 동일한 도메인에서 나온 경우 iframe의 CS를 변경하는 방법은 무엇입니까?

Iframe이 동일한 도메인에서 나오면 JQuery를 사용하는 CS를 수정할 수 있습니다. 간단한 예는 다음과 같습니다.

$ ( "#myiframe"). contents (). find ( "body"). css ( "배경색", "빨간색");

이것은 iframe의 신체의 배경색을 빨간색으로 바꿀 것입니다. . jQuery 대신 JavaScript를 사용하여 iframe의 CSS를 변경하여 Iframe의 CSS를 변경하기 위해 Plain JavaScript를 사용할 수 있습니다. 다음은 다음과 같이 할 수있는 방법입니다. iframedoc.body.style.style.backgroundcolor = "red";

이것은 또한 iframe의 신체의 배경색을 빨간색으로 바꿀 것입니다.

왜 내 CSS가 iframe에서 반영 하는가? IFRAME는 다른 도메인에서 나올 수 있으며,이 경우 동일한 오리핀 정책으로 인해 CSS를 수정할 수 없습니다. 또는 CSS를 변경하려고 할 때 Iframe의 콘텐츠가 완전히로드되지 않았을 수 있습니다. iframe이 완전히로드되도록하려면로드 이벤트를 사용할 수 있습니다.
PostMessage 메소드를 사용하여 크로스 도메인 iframe의 CSS를 변경할 수 있습니까?
예, Iframe의 소스 페이지를 제어 할 수 있다면 Postmessage 메소드를 사용하여 IFRAME로 메시지를 보내고 IFRAME의 메시지를 추가 할 수 있습니다. 변경.

iframe이 완전히로드 된 후 CSS 변경 사항을 적용 할 수 있습니까?

CSS를 변경하기 전에 IFRAME가 완전히로드되도록 하중 이벤트를 사용할 수 있습니다. jQuery :

$ ( "#myiframe"). on ( "load", function () .contents (). find ( "body"). css ( "background-color", "red");

});

}); 이것은 Iframe의 배경을 완전히 바꿀 것입니다. PDF 인 경우 iframe 컨텐츠의 CSS를 변경할 수 있습니까?

아니요, PDF 파일의 CSS를 변경할 수 없습니다. CSS는 HTML 또는 XML로 작성된 문서의 모양과 형식을 설명하는 데 사용되는 스타일링 언어입니다. PDF 파일에는 고유 한 형식이 있으며 CSS와 스타일을 지정할 수 없습니다.

CSS를 사용하여 iframe 크기를 변경할 수 있습니까?

예, CSS를 사용하여 iframe 크기를 변경할 수 있습니다. iframe {

width : 500px; 높이 : 300px; 이렇게하면 iframe의 너비와 높이가 각각 500px 및 300px로 변경됩니다.

는 CSS를 사용하여 CSS를 사용하여 AN의 테두리를 제거 할 수 있습니까? Iframe의 경계. 다음은 다음과 같이 할 수있는 방법입니다. iframe { 테두리 : 없음; 이렇게하면 iframe의 경계가 제거됩니다.

위 내용은 JQuery를 사용하여 iframe 컨텐츠에서 CSS를 변경하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!