Zasięg funkcji w podstronach (Iframe) [JQUERY]

pytanie zadane 24 września 2018 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)
edycja 25 września 2018 przez Oskar Szkurłat

Witam napisałem sobie krótką funkcję:

$('img').click(function() {
    var CLASS = this.className;
	if (CLASS == "Obrazek")
	{
		var SRC = this.src;
		$("#TransparentBackgroundGalleryID").prop('disabled',true);
		$("#GalleryZoomedImageID").attr("src",SRC);
		
		
		$('#EscapeZoomImageButton').click(function() {
			$("#TransparentBackgroundGalleryID").prop('disabled',false);
			$("#GalleryZoomedImageID").attr("src","");
		});
		
		$(document).keyup(function(e) {
			if (e.keyCode === 27) $('#EscapeZoomImageButton').click();
		});
	
	} else 
	{
		alert ( CLASS + " cos nie dziala" );
	}
	
});

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div class="BodyDiv" id="BodyDivID"> 

	<div class="GalleryZoomedImage" id="TransparentBackgroundGalleryID">
		<img id="GalleryZoomedImageID" width="90%" height="auto" src="">
		<a id="EscapeZoomImageButton">Zamknij podgląd</a>
	</div>

<iframe allowTransparency="true" src="Home_1.php" id="IframeBodyDiv_2" class="iframe" onload="SetSize('MyIframe')"></iframe>
	
	
	<!-- Dodawanie "biblioteki" -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	
	<script type="text/javascript" src="ownGalleryZoomImage.js">
		//Galeria: powiekszanie zdjecia
	</script>

</body>
</html>

<img alt="Budowa" class="Obrazek" src="Home_1_25_926454212.JPG" style="width: 50%;" /><br />
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="ownGalleryZoomImage.js">
        //Galeria: powiekszanie zdjecia
</script>

W skrócie co powinna robić:
Po wciśnięciu na element rodzaju img zapisuje klasę w zmiennej CLASS. Następnie jeżeli jest to klasa "Obrazek" to: zapisuje wartość ów obrazka w SRC, ujawnia obiekt o ID TransparentBackgroundGalleryID oraz podmienia źródło elementu o ID GalleryZoomedImageID. Ponadto po wciśnięciu elementu o ID EscapeZoomImageButton ukrywa wyżej przedstawiony element oraz czyści źródło obrazka (identycznie zachowuje się poprzez wciśnięcie przycisku escape na klawiaturze).
Wnioski i problem:
Testowałem, że działa odczyt SRC i CLASS, natomiast w moim przypadku chciałbym, aby dokonywało to bezpośrednio na obrazkach zawartych w IFrame. Niestety w okienku Iframe nie reaguje funkcja. Co mógłbym zrobić, aby po wciśnięciu na obrazek zawarty w iframe funkcja reagowała wywołując elementy z "głównej strony"? Próbowałem podpiąć tą samą funkcję do podstrony wywołanej na Iframe, natomiast bezskutecznie.

1	komentarz 25 września 2018 przez ScriptyChris Mędrzec (190,190 p.) Czy ten iframe znajduje się w tej samej domenie, co strona? Gdzie jest kod, którym próbujesz coś robić z iframe?

1	komentarz 25 września 2018 przez ShiroUmizake Nałogowiec (46,300 p.) Jeżeli nie, czy jest zgoda na cross-domain.

komentarz 25 września 2018 przez Oskar Szkurłat Bywalec (2,780 p.)

@JSHolic, tak, ta sama domena. Obie strony hostuję w jednym public.html.
Nie rozumiem drugiego pytania. Skrypt JQuery jest pierwszym dodanym kodem w poście, to on reaguje ma reagować na img w podstronach pokazanych na iframe.
Drugi kod to fragment strony Parent.
Trzeci to podstrona wyświetlana w IFrame.

komentarz 25 września 2018 przez ScriptyChris Mędrzec (190,190 p.)

Żeby dostać do DOMu wewnątrz iframe odnieś się do jego własności contentDocument i dopiero stamtąd możesz sobie szukać obrazka. Czyli na przykład:

var imgFromIframe = document.querySelector('iframe').contentDocument.querySelector('img');

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

Zasięg funkcji w podstronach (Iframe) [JQUERY]

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci