TradingView frame-messaging example.html

<p>To send command into some widget we use PostMessage (https://developer.mozilla.org/ru/docs/Web/API/Window/postMessage)<br>
Way to find required <iframe> is option "id" passed for initialization</p>
<p>Javascript and further HTML is Exapmle</p>
<p>NOTE: We use this tricky way because we need to handle all widgets the same. Both initialized with tv.js (https://www.tradingview.com/widget/advanced-chart/) and initialized self-replaced script (https://www.tradingview.com/widget/technical-analysis/)</p>


<!-- Example start -->
<!-- Advanced chart widget initialization -->
<div id="advanced-chart-widget-container"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
	window._tvEmbedWidgetAdvancedChart = new TradingView.widget({
		"id": "tv-embed-widget-advanced-chart", // this string will be set as as id attribute to <iframe>
		"allow_symbol_change": true,
		// some options
		"container_id": "advanced-chart-widget-container"
	});
</script>


<!-- Advanced chart widget initialization -->
<script>
	function whenDocumentReady(cb) {
		var isIE = ('attachEvent' in document);
		var isDocumentReady = isIE ? document.readyState === 'complete' : document.readyState !== 'loading';
		if (isDocumentReady) {
			cb();
		} else {
			document.addEventListener('DOMContentLoaded', cb);
		}
	}

	whenDocumentReady(function() {
		var elIframeWidget = null;

		function setSymbol(symbol) {
			if (
				!elIframeWidget ||
				!elIframeWidget.contentWindow
			) {
				return;
			}

			elIframeWidget.contentWindow.postMessage(
				{
					name: 'set-symbol',
					data: {
						symbol: symbol,
					},
				},
				'*'
			);
		}

		window.addEventListener('message', function (event) {
			var data = event.data;

			if (data.name === 'tv-widget-load') {
				if (data.frameElementId === 'tv-embed-widget-advanced-chart') { // NOTE: was passed in initialization
					elIframeWidget = document.getElementById('tv-embed-widget-advanced-chart');

					if (!elIframeWidget) {
						console.error('Advanced Chart widget iframe not found');
					}
				}

				if (elIframeWidget) {
					window.setSymbol = setSymbol;
					console.info('Function "setSymbol" is available in console.\nUsage: "setSymbol(\'TSLA\')"');
				}
			}
		});
	});
</script>

<!-- Example end -->

tradingview documentation is shit, but you're the real hero!