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>
Related
story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
I have 2 embeds I am displaying. The embeds have a link to a pdf:
<div id="container" class="text-center">
<embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
<embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>
I also have 2 buttons, one to show the embed and another to hide the embed. Like this:
<div class="button">
<button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>
I use the following functions to show and hide the embeds:
<script>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>
My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?
Isn't reloading the PDF in my browser (Chrome), so I can't reproduce, but using .visibility instead of .display might work in your browser.
<script>
function show(target) {
document.getElementById(target).style.visibility = 'visible';
}
function hide(target) {
document.getElementById(target).style.visibility = 'hidden';
}
</script>
You could also use .show()/.hide() Jquery function. Working plunck here. FYI, also added demo of loading a selected PDF into single <emded>.
/* toggle show hide of pdf */
$(document).on('click', '.pdf-container button', function(event){
var $target = $(event.target);
var $pdfViewer = $target.closest('.pdf-container').find('embed');
if(!$pdfViewer){ return; }
if($pdfViewer.is(':visible')){
$pdfViewer.hide();
$target.text('show');
return;
}
$pdfViewer.show();
$target.text('hide');
});
I made a little web-based web browser for a web-based OS I made. I noticed that in some sites, they have links that like to open in new tabs. Is there a way that this can be prevented and have the links open in the iframe instead?
Here's my code for the whole browser just in case:
<html>
<head>
<link href="./browser.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</head>
<body>
<div id="help">
<form action="help.html"><input type="submit" value="Help"></form>
</div>
Address:
<div id="logo">
<img src="stallion.png">
</div>
<input type="text" style="width: 400px;" name="url" id="url">
<input type="button" value="Go" id="load">
<div>
<input type="image" src="back.png" height=25 width=25 onclick="back()">
<input type="image" src="forward.png" height=25 width=25 onclick="forward()">
<input type="image" src="refresh.png" height=26 width=26 onclick="refresh()">
</div>
<iframe frameborder=0 class="netframe" src="http://www.bing.com/" id="main_frame"></iframe>
</body>
<script>
function back()
{
window.history.back();
}
</script>
<script>
function forward()
{
window.history.forward();
}
</script>
<script>
function refresh()
{
var iframe = document.getElementById('main_frame');
iframe.src = iframe.src;
}
</script>
</html>
There is two choices
1 : You can check all of the html in the iframe on each change and look for "target=_blank" and if so replace with "target=_self"
2 : Which I think would be the better way is, when the user clicks on an anchor tag check to see if the anchor has the attribute "target=_blank" if they do, simply remove it and then click the link.
I have provided a jsFiddle below
https://jsfiddle.net/L5dhp80e/
Html
<a class="newTab" href="http://www.google.com" target="_blank">
New Tab Google
</a>
<br />
<a class="removeBlank" href="http://www.google.com" target="_blank">
Removed Target Blank Google
</a>
Javascript
$(function () {
$('a.removeBlank').on('click', function () {
if ($(this).attr('target') == "_blank") {
$(this).attr('target', '_self');
}
$(this).click();
return false;
})
});
However if the iframe content is cross domain I don't think you can edit any of the code at all.
Get DOM content of cross-domain iframe
I found this answer in the web:
window.open = function (url, name, features, replace) {
document.getElementById('#iframe').src = url;
}
or with jQuery:
window.open = function (url, name, features, replace) {
$('#iframe').attr('src', url);
}
I haven't already tested it, but i hope it works.
Add target="_self"
<iframe src="http://google.com" target="_self"></iframe>
Target Attributes are:
_self = Opens the linked document in the same frame as it was clicked (this is default)
_blank = Opens the linked document in a new window or tab
_parent = Opens the linked document in the parent frame
_top = Opens the linked document in the full body of the window
framename = Opens the linked document in a named frame
Information from:
http://www.w3schools.com/tags/att_a_target.asp
http://jsfiddle.net/bUjx7/31
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.fieldsgame1 {
display:none;
}
.fieldsgame2 {
display:none;
}
.fieldsgame3 {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tablereplace a').click(function () {
$('.fieldsmatch').fadeOut(0);
$('.fieldsgame1').fadeOut(0);
$('.fieldsgame2').fadeOut(0);
$('.fieldsgame3').fadeOut(0);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(0);
});
});
</script>
Put this into my WordPress header. CSS is fine. HTML is fine. Javascript isn't working. Help?
I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. It's more DRY, fadeOut with speed of 0 is the same as hide()/show(), & jQuery.data() is used to retrieve the data-region.
HTML
<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>
CSS
.fieldsgame {
display:none;
}
JS
$('.tablereplace a').click(function () {
$('#fieldsmatch, .fieldsgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
JSFiddle.
=== UPDATE ===
Based on your comment, I found the following difference on the live page:
Match
Game 1
Game 2
Game 3
<div class="tablereplace">
<div class="fieldsmatch" id="fieldsmatch">8-0</div>
<div class="fieldsgame" id="fieldsgame1">7-1</div>
<div class="fieldsgame" id="fieldsgame2">6-2</div>
<div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>
Your specified click function is based on the .tablereplace a selector. But, on your site, there isn't any a found inside the .tablereplace . In other words, your HTML is wrong.
I have an html page. Here, I am using tabview of Yahoo API. That is :
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><em>Top Stories</em></li>
<li><em>Finance</em></li>
<li><em>Sports</em></li>
</ul>
<div class="yui-content">
<div><p>Top Stories</p></div>
<div><p>Finance</p></div>
<div><p>Sports</p></div>
</div>
</div>
In the onClickEvent the functions used, fetch data from Google NEWS>
function TopStories(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=TopStories";
}
function FinanceNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Finance";
}
function SportsNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Sports";
}
But the Output is navigation to NEWS page. But, I want to display them as Tab Content.
What should I do ?
You can use iframe for this purpose .. see below example ,,
Using Jquery tab, its always create a div where your result display. You have only way to open external link on your page using .
<li><a href=ReturnIfram()><span>Google</span></a></li>
href get a string which contain ifram like
public string ReturnIfram()
{
return "<iframe src="http://google.fr"></iframe>"
}
try above in javascript see below example
<html>
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://developerfusion.com/");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p>GO! </p>
</body>
</html>