I have the following script running to provide weather forecast for my tablets. The problem is that every time someone touch it by accident it opens the source page. Any ideas how could I just block the link for the external page? I had success on Iframe using the sandbox, but can't make it work on this, as I'm not sure what is this language:
<a class="weatherwidget-io" href="https://forecast7.com/en/51d51n0d13/london/ "data-label_1="LONDON" data-label_2="WEATHER" data-font="Roboto" data-icons="Climacons Animated" data-theme="pure" pointer-events: none>LONDON WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');href="javascript:void(0)"
</script>
<script>
function reloadIFrame() {
document.getElementById('weatherwidget-io-0').src = document.getElementById('weatherwidget-io-0').src;
}
window.setInterval(reloadIFrame, 95000);
</script>
<script type="text/javascript">
function DisableFrameLinks(){
var iFrame = document.getElementById('weatherwidget-io');
var links;
if ( iFrame.contentWindow)
{
links = iFrame.contentWindow.document.links;
for(var i in links)
{
links[i].href="#";
}
}
}
</script>
The pointer-events: none in the <a> is missing the style="" attribute around it.
Update it from:
<a class="weatherwidget-io" ... pointer-events: none>LONDON WEATHER</a>
to:
<a class="weatherwidget-io" ... style="pointer-events: none;">LONDON WEATHER</a>
Also, your entire code can be simplified to the below, as:
All the <script>!function(d,s,id)...</script> function does is add <script id="weatherwidget-io-js" src="https://weatherwidget.io/js/widget.min.js"></script> to the page if it doesn't exist - you can just add the script in the first place and remove the function.
The DisableFrameLinks() function is also removeable once the CSS style pointer-events: none; is applied correctly to the <a>.
Minimum-required code:
<a class="weatherwidget-io" href="https://forecast7.com/en/51d51n0d13/london/" data-label_1="LONDON" data-label_2="WEATHER" data-font="Roboto" data-icons="Climacons Animated" data-theme="pure" style="pointer-events: none;">LONDON WEATHER</a>
<script id="weatherwidget-io-js" src="https://weatherwidget.io/js/widget.min.js"></script>
<script>
function reloadIFrame() {
document.getElementById('weatherwidget-io-0').src = document.getElementById('weatherwidget-io-0').src;
}
window.setInterval(reloadIFrame, 95000);
</script>