Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Как заставить работать скрипт после загрузки другого? (https://javascript.ru/forum/css-html/82209-kak-zastavit-rabotat-skript-posle-zagruzki-drugogo.html)

Quark_ 01.04.2021 11:18

Как заставить работать скрипт после загрузки другого?
 
К сайту подключаю скрипт бронирования, через: <script src="https://сторонний сайт/"></script>
Он после загрузки страницы добавляет блок <div id="lresponse">, в котором находится iframe.

Необходимо, чтобы по клику на любую область <div id="lresponse"> - у iframe менялся css, но такие варианты не срабатывают

jQuery(window).load(function() {
//jQuery(document).ready(function(){
jQuery('#lresponse').click(function() {
    jQuery('#lresponse iframe').css({
        'height': 'auto'
    });
});
});


как я понимаю из-за того, что мой скрипт "не видит" объекта.
Как решить эту проблему? :blink:

рони 01.04.2021 11:36

Quark_, строка 3
jQuery('body').on('click', '#lresponse', function() {

Quark_ 01.04.2021 11:51

Цитата:

Сообщение от рони (Сообщение 535109)
Quark_, строка 3
jQuery('body').on('click', '#lresponse', function() {


Не помогло...
Не знаю как на форуме запустить демку, в jsfiddle сделал https://jsfiddle.net/FacepalmZone/n29et38f/1/

рони 01.04.2021 12:01

Цитата:

Сообщение от Quark_
как на форуме запустить демку,

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Quark_ 01.04.2021 12:10

<div class="block">
<script src="https://pms.connectone.ru/module/?hid=eb225c"></script>
</div>

<style>
html {
  height: 500px;
}
.block {
  background: #000;
padding: 10px;
}
#rsnlresponse iframe {
  height: 150px;
}
</style>

<script>
jQuery(window).load(function() {
jQuery('body').on('click', '#rsnlresponse', function() {
    jQuery('#rsnlresponse iframe').css({
        'height': 'auto'
    });
});
});
</script>

рони 01.04.2021 12:15

Quark_,
как вариант ...
jQuery(window).on('load', function() {
window.setTimeout(function() {
 jQuery('#rsnlresponse iframe').css({
        'height': 'auto'
    });
}, 300)
});

рони 01.04.2021 12:16

Quark_,
нет у вас jQuery ни здесь ни в другой песочнице

рони 01.04.2021 12:17

Quark_,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
jQuery(window).on('load', function() {
window.setTimeout(function() {
 jQuery('#rsnlresponse iframe').css({
        'height': 'auto'
    });
}, 300)
});
    </script>
</head>
<body>
<div class="block">
<script src="https://pms.connectone.ru/module/?hid=eb225c"></script>
</div>
</body>
</html>

рони 01.04.2021 12:29

Цитата:

Сообщение от Quark_
Как решить эту проблему?

вероятно никак, высота фрейма рассчитывается автоматически(скриптом) при любом изменении, клики не работают, да и бесполезны, скрипт восстанавливает необходимую ему высоту, и это атрибут а не стиль. можно
jQuery('#rsnlresponse iframe').attr({
        'height': 'auto'
    });
но это бесполезно. возможно есть решение, но мне он неизвестно.

voraa 01.04.2021 12:43

Я не понял, что там делает конкретный скрипт с этим конкретным iframe.
Click по фрейму прямым способом действительно не отловить.
Но можно косвенно.
https://gist.github.com/jaydson/1780598
Идея в том, что мы ловим mouseover на блоке под фреймом.
И если при этом происходит клик по фрейму, то наше окно теряет фокус в этот момент

рони 01.04.2021 12:51

Цитата:

Сообщение от voraa
Я не понял, что там делает конкретный скрипт с этим конкретным iframe.

фрейм самостоятельно регулирует свою высоту, поэтому изменять по клику(???) или по таймеру (можно) бесполезно, атрибут с 'auto' поменяется на 345px (условно)

рони 01.04.2021 12:52

Цитата:

Сообщение от voraa
Идея в том, что мы ловим mouseover на блоке под фреймом.

:thanks:

рони 01.04.2021 12:55

Цитата:

Сообщение от рони
фрейм самостоятельно регулирует свою высоту

функция setHeight
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
jQuery(window).on('load', function() {
window.setTimeout(function() {
   jQuery('#rsnlresponse iframe').attr({
        'height': 'auto'
    });
}, 2000)
});
    </script>
</head>
<body>
<div class="block">
<script src="https://pms.connectone.ru/module/?hid=eb225c"></script>
</div>
</body>
</html>

рони 01.04.2021 13:03

для любопытных про setHeight
setHeight();
	var documentHeight = 0;
	var curpicker = '';
	$(document).ready(function(){
		window.setTimeout(function(){setHeight();},3000);
		window.scrollTo(0, 0);
		OnResizeElement(document.getElementsByClassName('main-element')[0],300);
		documentHeight = document.getElementsByClassName('main-element')[0].scrollHeight;
		parseDate = function(date) {
			var parts;
			parts = date.split('.');
			return parts[2] + '-' + parts[1] + '-' + parts[0];
		};
		min_booking_date = function(selectedDate) {
			var new_minDate, result;
			new_minDate = new Date(parseDate(selectedDate));
			new_minDate.setDate(new_minDate.getDate() + 1);
			result = new_minDate;
			return $.datepicker.formatDate('dd.mm.yy', result);
		};

	});
	window.onresize = function(event) {
		var newDocumentHeight = document.getElementsByClassName('main-element')[0].scrollHeight;
		var heightDiff = documentHeight - newDocumentHeight;
		if ( heightDiff > 10 | heightDiff < -10 ) {
			setHeight();
		}
	}
		function closestRestricted(restricted_array, date) {
		var i, len, r, result, sorted;
		sorted = restricted_array.map(parseDate).sort();
		result = null;
		for (i = 0, len = sorted.length; i < len; i++) {
			r = sorted[i];
			if (r >= parseDate(date)) {
				r = new Date(r);
				r.setDate(r.getDate());
				result = r;
				break;
			}
		}
		return $.datepicker.formatDate('dd.mm.yy', result);
	}
	function parseDate(date) {
		var parts;
		parts = date.split('.');
		return parts[2] + '-' + parts[1] + '-' + parts[0];
	}
	function goDate(selectedDate,c) {
		var new_minDate, result;
		new_minDate = new Date(parseDate(selectedDate));
		new_minDate.setDate(new_minDate.getDate() + c);
		result = new_minDate;
		return $.datepicker.formatDate('dd.mm.yy', result);
	}

	function setHeight() {
		var documentHeight = document.getElementsByClassName('main-element')[0].scrollHeight
		if (documentHeight > 10) {
			var message = 'documentHeight:'+documentHeight;
			parent.postMessage(message,"*");
		}
			}
	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
	var eventer = window[eventMethod];
	var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
	eventer(messageEvent,function(e) {
		if (  (typeof e.data === 'string') && (e.data.indexOf('scroll') > -1) ) {
			var height = e.data.split('scroll:')[1],
				height = parseInt(height);
			var bh = 0;
			if ($('#basketBody').length) {
				bh = parseInt($('#basketBody').height());
			}
			dh = document.getElementsByClassName('main-element')[0].scrollHeight+bh+10;
			if (dh < height) {
				height= dh;
			}
			$('.basketItem').animate({top:(height-bh),position:'absolute',left:10,right:10},{duration:100,queue:false,easing:'swing'});
		}
		if (  (typeof e.data === 'string') && (e.data.indexOf('calendarMonths') > -1) ) {
			var months = parseInt(e.data.split(':')[1]);
			var date = e.data.split(':')[2];
			var mindate = e.data.split(':')[3];
			var maxdate = e.data.split(':')[4];
			var restricted = jQuery.parseJSON(e.data.split(':')[5]);
			if(mindate) {
				mindate = min_booking_date(mindate);
			}
			else mindate='+0d';
			$('#datepicker_plain').datepicker({
				minDate: mindate,
				numberOfMonths: months,
				changeMonth: true,
				onSelect: function(date){parent.postMessage('setDate:'+date,"*");}
			});
			$('#datepicker_plain').datepicker("option",	"defaultDate",date);
			$('#datepicker_plain').datepicker("option","minDate",mindate);
			$('#datepicker_plain').datepicker("option","maxDate",maxdate);
			$('#datepicker_plain').datepicker("option","beforeShowDay", function(date) {
				if (restricted && restricted.indexOf($.datepicker.formatDate('dd.mm.yy', date)) !== -1) {
					return [false, 'booked_day', 'Забронировано'];
				} else {
					return [true];
				}
			});
		}
		if (  (typeof e.data === 'string') && (e.data.indexOf('setDate') > -1) && curpicker) {
			$('.'+curpicker+'_datepicker_frame').val(e.data.split('setDate:')[1]);
			if (curpicker=='from') {
				$('.to_datepicker_frame').click();
			}
		}
	},false);

	function OnResizeElement(element, time){
		var id = null;
		var _constructor = function(){
			var HEIGHT = element.scrollHeight;
			id = setInterval(function(){
				if(HEIGHT != element.scrollHeight){
					HEIGHT = element.scrollHeight;
					setHeight();
				};
			}, time);
		};
		var _destructor = function(){
			clearInterval(id);
		};
		this.Destroy = function(){
			_destructor();
		};
		_constructor();
	};


Часовой пояс GMT +3, время: 16:34.