iframe에 CSS를 어떻게 적용합니까?
iframe 섹션(RSS 링크 표시)이 있는 간단한 페이지가 있습니다.어떻게 하면 메인 페이지에서 iframe에 표시된 페이지에 동일한 CSS 형식을 적용할 수 있습니까?
편집: 적절한 CORS 헤더를 설정하지 않으면 도메인 간에 작동하지 않습니다.
여기에는 두 가지 다른 것이 있습니다: iframe 블록의 스타일과 iframe에 포함된 페이지의 스타일입니다.일반적인 방법으로 iframe 블록의 스타일을 설정할 수 있습니다.
<iframe name="iframe1" id="iframe1" src="empty.htm"
frameborder="0" border="0" cellspacing="0"
style="border-style: none;width: 100%; height: 120px;"></iframe>
iframe에 포함된 페이지의 스타일은 하위 페이지에 포함하여 설정해야 합니다.
<link type="text/css" rel="Stylesheet" href="Style/simple.css" />
또는 Javascript를 사용하여 상위 페이지에서 로드할 수 있습니다.
var cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe1'].document.head.appendChild(cssLink);
Google 캘린더에서 이 문제를 해결했습니다.좀 더 어두운 배경에 스타일을 맞추고 폰트를 바꾸고 싶었습니다.
접속에 제한이 없었기 으로써 PHP 함수를 사용했습니다.file_get_contents페이지에서 전체 내용을 가져올 수 있습니다.Google URL을 호출하는 대신 서버에 있는 php 파일을 호출할 수 있습니다.google.php수정된 원본 내용을 포함합니다.
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
스타일시트에 경로 추가:
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
(가 (으) 바로 head tag는 다음과 같습니다.
CSS와 Js가 상대적으로 호출되는 경우 원본 URL에서 기본 URL을 지정합니다.
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
결승전google.php파일은 다음과 같아야 합니다.
<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;
그런 다음 변경합니다.iframe코드 포함 대상:
<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
행운을 빕니다.
iframe의 내용이 완전히 사용자 통제 하에 있지 않거나 다른 스타일의 다른 페이지에서 내용에 액세스하려는 경우 JavaScript를 사용하여 이를 조작할 수 있습니다.
var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);
사용하는 브라우저에 따라 동일한 도메인에서 제공되는 페이지에서만 사용할 수 있습니다.
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url,
type: "text/css"
}));
다음은 CSS 코드를 사용하지 않고 직접 적용하는 방법입니다.<link>추가 스타일시트를 로드합니다.
var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
'#banner{display:none}; ' +
'</style>';
jQuery(head).append(css);
iframe 페이지에서 배너를 숨깁니다.제안해 주셔서 감사합니다!
행히가 말한 것처럼 iframe에서 페이지를 제어하는 경우, 공통 스타일로 공유 CSS 파일을 만든 다음 HTML 페이지에서 링크하는 것이 가장 쉬운 방법입니다.
그렇지 않으면 iframe의 외부 페이지에서 페이지 유형을 동적으로 변경할 수 없습니다.이는 스푸핑 및 기타 해킹에 대한 오용 가능성으로 인해 브라우저가 프레임 간 스크립팅에 대한 보안을 강화했기 때문입니다.
이 자습서에서는 일반적으로 프레임의 경우 스크립팅에 대한 자세한 내용을 제공할 수 있습니다.교차 프레임 스크립팅에 대해서는 IE 관점에서 보안 제한 사항을 설명합니다.
iframe은 대부분의 브라우저에서 일반적으로 다른 HTML 페이지처럼 처리됩니다.iframe의 내용에 동일한 스타일시트를 적용하려면 해당 페이지에서 참조하십시오.
약간의 변화가 있는 위의 것들은 작동합니다.
var cssLink = document.createElement("link")
cssLink.href = "pFstylesEditor.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this
var doc=document.getElementById("edit").contentWindow.document;
//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();
//Then append child
doc.body.appendChild(cssLink);
적어도 ff3 및 i8은 잘 작동합니다.
다음은 저에게 효과가 있었습니다.
var iframe = top.frames[name].document;
var css = '' +
'<style type="text/css">' +
'body{margin:0;padding:0;background:transparent}' +
'</style>';
iframe.open();
iframe.write(css);
iframe.close();
프레임 내용 로드 지연에 대처하기 위해 위의 jQuery 솔루션에서 확장합니다.
$('iframe').each(function(){
function injectCSS(){
$iframe.contents().find('head').append(
$('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
);
}
var $iframe = $(this);
$iframe.on('load', injectCSS);
injectCSS();
});
사용해 볼 수 있습니다.
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
에서 CSS와 , 은 아마도 "CSS"와 "CSS"를 대체하는 것을 해야 할 입니다.<IFRAME>Ajax가 로드된 컨텐츠를 포함합니다.이것은 검색 봇이 자바스크립트를 실행할 수 있을 때 SEO에 더 친숙합니다.
문서에 다른 html 페이지를 포함하는 jQuery 예제입니다.이것은 훨씬 더 SEO 친화적입니다.iframe 이봇포페이를인지덱지하않싱도하록않다에서 하지 않도록 만 하면 .robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript"></script>
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
Google: http://code.google.com/apis/ajaxlibs/documentation/ 에서 직접 jQuery를 포함할 수도 있습니다. 즉, 최신 버전의 자동 검색 기능을 선택할 수 있으며 속도가 크게 향상됩니다.또한 jQuery만 제공하는 것에 대해 신뢰해야 한다는 것을 의미합니다 ;)
내 컴팩트 버전:
<script type="text/javascript">
$(window).load(function () {
var frame = $('iframe').get(0);
if (frame != null) {
var frmHead = $(frame).contents().find('head');
if (frmHead != null) {
frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
//frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
}
}
});
</script>
지만은, 가끔하은.iframe가 로드된 창에서 준비되지 않았으므로 타이머를 사용해야 합니다.
사용 준비 코드(타이머 포함):
<script type="text/javascript">
var frameListener;
$(window).load(function () {
frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
var frame = $('iframe').get(0);
if (frame != null) {
var frmHead = $(frame).contents().find('head');
if (frmHead != null) {
clearInterval(frameListener); // stop the listener
frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
//frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
}
}
}
</script>
... 및 jQuery 링크:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
동일한 도메인에 대해 많은 답변이 작성되므로 여러 도메인에서 이를 수행하는 방법을 작성하겠습니다.
먼저 Post Message API를 알아야 합니다.우리는 두 개의 창문 사이에서 통신할 메신저가 필요합니다.
여기 제가 만든 메신저가 있습니다.
/**
* Creates a messenger between two windows
* which have two different domains
*/
class CrossMessenger {
/**
*
* @param {object} otherWindow - window object of the other
* @param {string} targetDomain - domain of the other window
* @param {object} eventHandlers - all the event names and handlers
*/
constructor(otherWindow, targetDomain, eventHandlers = {}) {
this.otherWindow = otherWindow;
this.targetDomain = targetDomain;
this.eventHandlers = eventHandlers;
window.addEventListener("message", (e) => this.receive.call(this, e));
}
post(event, data) {
try {
// data obj should have event name
var json = JSON.stringify({
event,
data
});
this.otherWindow.postMessage(json, this.targetDomain);
} catch (e) {}
}
receive(e) {
var json;
try {
json = JSON.parse(e.data ? e.data : "{}");
} catch (e) {
return;
}
var eventName = json.event,
data = json.data;
if (e.origin !== this.targetDomain)
return;
if (typeof this.eventHandlers[eventName] === "function")
this.eventHandlers[eventName](data);
}
}
이를 두 개의 창에서 사용하여 통신하면 문제를 해결할 수 있습니다.
메인 창에서,
var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");
var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
css: cssContent
})
그런 다음 I 프레임에서 이벤트를 받습니다.
Iframe에서:
var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
cssContent: (data) => {
var cssElem = document.createElement("style");
cssElem.innerHTML = data.css;
document.head.appendChild(cssElem);
}
})
자세한 내용은 전체 Javascript 및 Iframes 튜토리얼을 참조하십시오.
여기에 있는 다른 답변은 jQuery와 CSS 링크를 사용하는 것 같습니다.
이 코드는 바닐라 자바스크립트를 사용합니다.새로운 기능을 제공합니다.<style> 요소의 CSS를 합니다.해당 요소의 텍스트 내용을 새 CSS를 포함하는 문자열로 설정합니다.그리고 이 요소를 iframe 문서의 머리에 직접 추가합니다.
var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
'.some-class-name {' +
' some-style-name: some-value;' +
'}'
;
iframe.contentDocument.head.appendChild(style);
당신이 "doc.open()"이라고 말할 때, 그것은 당신이 iframe 안에 무엇이든 HTML 태그를 쓸 수 있다는 것을 의미하기 때문에, 당신은 HTML 페이지에 대한 모든 기본 태그를 써야 하고 만약 당신이 iframe에 CSS 링크를 가지고 싶다면 그냥 iframe에 CSS 링크를 쓰십시오.예를 들어 보겠습니다.
doc.open();
doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');
doc.close();
iframe의 내용을 이런 식으로 스타일을 지정할 수 없습니다.서버 사이드 스크립트(PHP, ASP 또는 Perl 스크립트)를 사용하거나 피드를 JavaScript 코드로 변환하는 온라인 서비스를 찾는 것이 좋습니다.다른 방법은 서버 측에서 다음을 수행할 수 있는 경우뿐입니다.
만약 당신이 iframe 페이지에 접근할 수 있고 당신의 페이지에 iframe을 통해 그것을 로드할 때만 다른 CSS가 적용되기를 원한다면, 나는 여기서 이런 종류의 해결책을 찾았습니다.
프레임이 다른 도메인을 로드하는 경우에도 작동합니다.
에 대해 확인해 보다.postMessage()
계획은, CSS를 iframe에 메시지로 보내는 것입니다.
iframenode.postMessage('h2{color:red;}','*');
*iframe에 있는 도메인과 관계없이 이 메시지를 보내는 것입니다.
iframe에서 메시지를 수신하고 수신된 메시지(CSS)를 해당 문서 헤드에 추가합니다.
iframe 페이지에 추가할 코드
window.addEventListener('message',function(e){
if(e.data == 'send_user_details')
document.head.appendChild('<style>'+e.data+'</style>');
});
내 생각에 가장 쉬운 방법은 iframe과 같은 위치에 다른 div를 추가하는 것입니다.
성공하다, 성공하다, 성공하다, 성공하다, 성공하다, 성공하다, 성공함z-indexiframe 컨테이너보다 크기 때문에 당신은 쉽게 당신만의 div 스타일을 만들 수 있습니다.클릭해야 하는 경우 다음을 사용합니다.pointer-events:none당신 자신의 div에서, 그래서 iframe은 당신이 그것을 클릭해야 할 경우에 작동할 것입니다;)
누군가에게 도움이 되길 바랍니다 ;)
이렇게 메인 html에 스타일을 넣을 수 있는 다른 솔루션을 찾았습니다.
<style id="iframestyle">
html {
color: white;
background: black;
}
</style>
<style>
html {
color: initial;
background: initial;
}
iframe {
border: none;
}
</style>
그런 다음 iframe에서 이 작업을 수행합니다(jsonload 참조).
<iframe onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>
그리고 js.
<script>
ifstyle = document.getElementById('iframestyle')
iframe = top.frames["log"];
</script>
최상의 솔루션은 아닐 수도 있고, 확실히 개선될 수도 있지만, 상위 창에 "스타일" 태그를 유지하려면 다른 옵션입니다.
여기, 도메인 내부에는 두 가지가 있습니다.
- iFrame 단면
- iFrame 내부에 로드된 페이지
그래서 당신은 그 두 부분을 다음과 같이 스타일을 만들고자 합니다.
iFrame 단면 스타일
CSS를 사용하여 스타일을 지정할 수 있습니다.id또는class이름. 부모 스타일 시트에서도 스타일을 지정할 수 있습니다.
<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>
<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>
iFrame 내부에 로드된 페이지 스타일 지정
이 스타일은 Javascript를 사용하여 상위 페이지에서 로드할 수 있습니다.
var cssFile = document.createElement("link")
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFile.href = "iFramePage.css";
그런 다음 CSS 파일을 존경받는 iFrame 섹션으로 설정합니다.
//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile);
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);
여기서 iFrame 내부의 페이지 머리 부분을 편집할 수도 있습니다.
var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
$("<link/>",{
rel: "stylesheet",
href: urlPath,
type: "text/css" }
));
우리는 iframe에 스타일 태그를 삽입할 수 있습니다.
<style type="text/css" id="cssID">
.className
{
background-color: red;
}
</style>
<iframe id="iFrameID"></iframe>
<script type="text/javascript">
$(function () {
$("#iFrameID").contents().find("head")[0].appendChild(cssID);
//Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
});
</script>
var link1 = document.createElement('link');
link1.type = 'text/css';
link1.rel = 'stylesheet';
link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);이것이 제가 생산을 하는 방식입니다.iframe이 다른 웹 사이트에 속해 있으면 CORS 오류가 발생하여 작동하지 않는다는 점을 유념할 필요가 있습니다.
var $iframe = document.querySelector(`iframe`);
var doc = $iframe.contentDocument;
var style = doc.createElement("style");
style.textContent = `*{display:none!important;}`;
doc.head.append(style);
경우에 따라 다음을 첨부할 수도 있습니다.loadiframe:iframe 파일:
var $iframe = document.querySelector(`iframe`);
$iframe.addEventListener("load", function() {
var doc = $iframe.contentDocument;
var style = doc.createElement("style");
style.textContent = `*{display:none!important;}`;
doc.head.append(style);
});
노드를 iframe 버전 자체로 대체하는 훌륭한 스크립트가 있습니다.코드펜 데모
사용 예:
// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);
// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
return iframify(component, {});
});
// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
headExtra: '<style>.component { color: red; }</style>',
metaViewport: '<meta name="viewport" content="width=device-width">'
});
대안으로 아래 lib와 같은 CSS-in-JS 기술을 사용할 수 있습니다.
https://github.com/cssobj/cssobj
JS 객체를 iframe에 동적으로 CSS로 주입할 수 있습니다.
이것은 개념일 뿐이지만 보안 검사 및 필터링 없이 구현하지 마십시오!그렇지 않으면 스크립트가 사이트를 해킹할 수 있습니다!
답변: 대상 사이트를 제어하는 경우 수신기 스크립트를 다음과 같이 설정할 수 있습니다.
를 iframe으로 합니다.style매개 변수, 예:
http://your_site.com/target.php?color=red
는 (으)ㄹ게요a{color:red}에 의해 암호화된.urlencode기능.
페이지를 합니다.target.php다음과 같이:
<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])? $col : "black") ;?> } </style>
..........
다음 단계를 수행했습니다.
- 개최할 클래스가 있는 디브
iframe - 더하다
iframe에▁div. - CSS 파일에서,
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }
이것은 IE 6에서 작동합니다.다른 브라우저에서 작동해야 하는 경우 확인하십시오!
언급URL : https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
'programing' 카테고리의 다른 글
| rvm 설치가 작동하지 않음: "RVM이 함수가 아닙니다." (0) | 2023.06.03 |
|---|---|
| 속성에 대한 바인딩 상태에 대한 [(ngModel)]과 [ngModel]의 차이점은 무엇입니까? (0) | 2023.06.03 |
| 리플렉터에 대한 오픈 소스 대안? (0) | 2023.05.29 |
| Exec : stdout "live" 표시 (0) | 2023.05.29 |
| 원격 서버의 Mongodump (0) | 2023.05.29 |