Przejrzysty element iframe nad innym ramką iframe

Co próbuję osiągnąć, to element iframe umieszczony nad innym elementem iframe zawierającym dokument PDF - pierwszy element iframe powinien być przezroczysty i powinien obejmować element iframe z plikiem PDF. Potrzebuję tego specjalnie dla IE (9+).Przejrzysty element iframe nad innym ramką iframe

Kod próbowałem dotąd:

<html> 
<head> 
<style> 
</style> 

</head> 
<body> 

<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe> 

<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> 
</body> 
</html>

iframeContent.html:

<html> 
<style type="text/css"> 

</style> 

<body style="background: transparent"> 
</body> 
</html>

Jednakże powyższe nie działa - iframe nie jest przezroczysty. Czy ktoś wie, jak rozwiązać ten problem? Jak już wspomniałem w komentarzach poniżej, rozwiązanie zamieszczone poniżej nie działa z zainstalowanym czytnikiem Adobe DC (jeśli działa w ogóle).

Źródło

2016-10-06 user4205580

Jaki jest sens posiadania przejrzystego iframe na inną? Czy chcesz uniemożliwić użytkownikom dotykanie pliku PDF? W takim przypadku zalecam użycie 'pointer-events: none;' zamiast tego, ponieważ jest to o wiele prostszy sposób na osiągnięcie tego. –

@ AntonioHernández Ponieważ muszę umieścić inne obiekty (standardowe elementy html, divy itp. - myślę o menu strony, które powinny być widoczne przez cały czas) nad tekstem iframe z plikiem PDF, a jedynym sposobem na to jest umieścić element iframe między plikiem PDF i moim div. A jednocześnie chcę, aby plik PDF pozostał widoczny. http://stackoverflow.com/a/12977151/4205580 – user4205580

jeśli pokryjesz jeden element iframe nad innym, nawet jeśli sprawisz, że będzie przezroczysty Nie możesz wybrać tekstu w formacie PDF drugiego elementu iframe – Rahul

Spróbuj ustawić ustawienie opacity: 0 na zewnętrznym elemencie iframe.

Korzystanie zmodyfikowanego kodu,

<iframe src="iframeContent.html" frameborder="0" style="opacity: 0; z-index: 2; width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe> 


<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>

Można również użyć z-index zarządzać układania elementów. Wszystkie elementy domyślne z-indez to 1. Te z wyższymi wartościami pojawią się na elementach o niższym indeksie Z.

Źródło

2016-10-06 20:01:03 Naltroc

Nie działa. Próbowałem już tego. – user4205580

Spróbuj kod:

HTML 1

<!--Code for transparent iframe--> 
<html> 
<body style="background: none transparent"> 
<div> I am a crappy container on top of this boring PDF</div> 
</body> 
</html>

HTML 2

<!--Code for both iframes. 
<html> 
<head> 
<style> 
</style> 

</head> 
<body> 

<iframe src="SO1.html" frameborder="0" style="width: 100%; height: 300px; position: fixed; left:0px; top: 0px;" allowtransparency="true"></iframe> 

<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> 
</body> 
</html>

To pozycjonuje przejrzystego iframe poprawnie na górze PDFie. Wystąpił również błąd składniowy dla atrybutu allowTransparency, nie powinien on mieć kapitału T.

Źródło

2016-10-06 21:21:20

Tak, pozycjonuje element iframe na górze pliku PDF, ale nie miałem problemu z jego osiągnięciem. Pytanie brzmi, jak sprawić, by ten topowy element iframe był całkowicie przezroczysty (chcę zobaczyć plik PDF przez tę ramkę iframe). Jeśli uruchomisz swój przykład, zobaczysz, że nie działa w ten sposób. – user4205580

Kod, który Ci udostępniłem, działa dokładnie tak, sprawia, że górny element iframe jest całkowicie przezroczysty, możesz zobaczyć plik PDF za jego pośrednictwem. –

Z jakiegoś powodu to nie działa dla mnie. Używam IE 11 z czytnikiem Adobe DC. – user4205580

Może być to wola pomaga

<html> 
<head> 
<style> 
</style> 

</head> 
<body> 

<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:none transparent;" allowtransparency="true"></iframe> 

<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe> 
</body> 
</html>

iframecontent.html

<html> 
<style type="text/css"> 

</style> 

<body style="background:none transparent;"> 

</body> 
</html>

Źródło

2016-10-19 17:01:41 ubm

Nie. Nie działa poprawnie. – user4205580

Dla iframe, który chcesz wyświetlić przejrzyste:

body{ 
    opacity: 0.0; 
    background: transparent; 
    color: transparent; 
}

Źródło

2016-10-20 03:25:06

Cóż, to też nie działa dla mnie. – user4205580

Nawet ty używasz '* { krycie: 0.0; tło: przezroczysty; kolor: przezroczysty; } ' –

Tak, nie działa. Testowałeś to? Jaki jest twój system operacyjny, wersja wtyczki Adobe Reader i wersja IE? – user4205580

Stworzyłem dwa pliki HTML jako poniżej i zadziałało to dla mnie. Dostosowałem szerokość i wysokość do 100% i działało zgodnie z oczekiwaniami. Nie próbuj z żadną instancją jsbin etc i jej nie działa tam ze względów bezpieczeństwa podczas ładowania zewnętrznej witryny w elemencie iframe. Wypróbuj rzeczywisty plik html i załaduj go do przeglądarki, która dla mnie działała.

Html 1: pdf.html

<html> 
<head> 
    <style type="text/css"> 
     #outer { 
      position: fixed; 
      left: 150px; 
      top: 20px; 
      width: 100px; 
      z-index: 2; 
     } 

     #inner{ 
      background-color: transparent; 
     } 

     .cover { 
      position: absolute; 
      border: none; 
      top: 0; 
      left: 0; 
      height: 100%; 
      width: 100%; 
      z-index: -1; 
     } 

     #pdf { 
      position: relative; 
      z-index: 1; 
     } 
    </style> 
</head> 
<body> 


    <div id="outer"> 
     <div id="inner"> 
      <iframe src="iframeContent.html" style="width:90px; height:70px; background-color: transparent;" frameborder="0" allowtransparency="true"></iframe> 
     </div> 
     <iframe class="cover" src="about:blank" allowtransparency="true"></iframe> 
    </div> 
    <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="600px" id="PDF" name="PDF" frameborder="0"></iframe> 

</body> 

</html>

Html 2: iframecontent.html

<html> 

<body> 
    <h1 style="background-color:transparent;">Test</h1> 
</body> 
</html>

Źródło

2016-10-21 04:33:37

Właśnie umieściłem pdf.html i iframecontet.html w tym samym folderze, otworzyłem plik pdf.html z IE 11 i nie, to nie działa. Iframe nie jest przezroczysty – user4205580

OK, testowałem w chromie i jest dobrze.Mozie mi rzucić okiem w IE 11. –

To jest główny problem. Łatwo jest go uruchomić w innych przeglądarkach, ale pytanie dotyczyło konkretnie IE – user4205580

Przejrzysty element iframe nad innym ramką iframe

Odpowiedz

Powiązane problemy