Как правильно получить доступ к элементам iframe с изменёнными атрибутами JS в самом iframe?

Question

[Андрей]

Есть страница со списком элементов, в коде страницы есть JS, который добавляет класс на элемент по которому кликнули. Эта страница подгружается в ифрейме на другой странице в рамках одного домена.

сам ифрейм:

<iframe src="/Cloud/fortiny" width="988px" height="420px" frameborder="0" id="cloudFrame"></iframe>

Содержимое этого ифрейма получается получить через:

//Так получается получить доступ к ифрейм, но в первоначальном состоянии, то есть нет на выбранном элементе добавленного класса
		var iframe = document.getElementById('cloudFrame');
		var iframeDoc = iframe.contentWindow.document;
		if (iframeDoc.readyState == 'complete') {
			console.log('iframeDoc===============');
			console.log(iframeDoc);
			console.log('===============');
		}

Пробовал ещё так:

var iframe = document.getElementById('cloudFrame');
			iframe.onload = function() {
			var iframeDoc2 = iframe.contentWindow.document;
			console.log('iframeDoc2===============');
			console.log(iframeDoc2);
			console.log('===============');
			iframeDoc2.body.style.backgroundColor = 'orange';
		};

Прошу помощи, сам во фронтенде очень слаб, делал, как описано тут: https://learn.javascript.ru/iframes

Answer 1

[Дмитрий Гольд]

<script>
var iframe = document.getElementById('cloudFrame');
iframe.onload = function(){
var iframeDoc = iframe.contentWindow.document;
iframeDoc.body.style.backgroundColor = 'rgba(0, 0, 0, 0)';
iframeDoc.body.style.background = 'url(/././img/opacity.png)';
iframeDoc.body.style.backgroundColor.opacity = '0';
iframe.contentWindow.document.querySelector('.tabs').style.height = '0px';
iframe.contentWindow.document.querySelector('.tabs').style.display = 'none';
iframe.contentWindow.document.querySelector('.tabs').style.width = '0px';
iframe.contentWindow.document.querySelector('.main-left').style.display = 'none';
iframe.contentWindow.document.querySelector('.main-right').style.backgroundColor = 'rgba(0, 0, 0, 0)';
iframe.contentWindow.document.querySelector('.darkMask').style.backgroundColor = 'rgba(0, 0, 0, 0)';
};
</script>