개체의 내용 스타일 지정/포함

Question

작은 문서를 표시하는 데 사용하는 object 요소 (embed 포함)가있는 작은 웹 응용 프로그램을 개발 중입니다.

문서는 PDF 또는 웹 서비스에서 base64 문자열 형태로 가져 오는 일반 텍스트 파일 (.txt) 일 수 있습니다. 그런 다음 콘텐츠를 표시하기 위해 object 및 embed에 대한 data 및 src 속성을 각각 업데이트합니다. 최종 결과는 다음과 같이 (간체) 보일 것이다

object { 
 
    border: 1px solid #ccc; 
 
    width: 300px; 
 
    height: 100px; 
 
}

<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh"> 
 
    <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" /> 
 
</object>

모든 PDF 파일이 (브라우저 플러그인을 사용하여로드) 확인 봐,하지만 난 텍스트 파일과 몇 가지 문제에 직면하고있다 . .txt의 내용이 올바르게 표시되지만 텍스트가 조금 작아 보이고 크기를 크게해야합니다.

나는 object 및 embed하지만 내용의 글꼴 크기를 변경 시도

은 영향을받지 않습니다 :

object, embed { 
    font-size: 32px; 
} 

크롬, 나는 개체의 내용이 내용을 표시하는 #document 것을 보았다 pre의 base64 .txt입니다. 그래서 pre 스타일을하려고했으나 object 태그 외부에만 pre 태그는 내부가 아닌 그 중 하나를 수행하십시오

pre { 
    font-size: 32px; 
} 

그것이 object/embed의 내용에 스타일을 제공 할 수 있습니까? 어떻게 할 수 있니?

Answer 1

여기는 의사 솔루션이며 파이어 폭스 (로컬)에서 작동하며 크롬이 아닙니다. 아이디어는 객체의 내용에 액세스하고 머리에 사용자 정의 CSS를 추가하는 것입니다. 이 솔루션의 문제점은 외부 콘텐츠가 포함 된 iframe처럼 동작하므로 브라우저에서 교차 출처 인 문제가 발생한다는 것입니다.

NB : 어쩌면 문제는이 십자가를 피하는 방법이 될 것입니다 내가 객체의 내용

function addCss() { 
 
\t $('object').contents().find("head").append($("<style type='text/css'>pre{font-size:32px;}</style>")); 
 
} 
 

 
setTimeout(function(){addCss()},2000);

object { 
 
    border: 1px solid #ccc; 
 
    width: 300px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh"> 
 
    <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" /> 
 
</object>

를로드 한 후 난 기능을 실행해야에서는 setTimeout을 사용 콘텐츠는 귀하와 귀하의 사이트가 동일한 사이트에서 제공되기 때문에 발생하는 문제입니다.