My google map works fine on my site:
<iframe id='iframe1' src="https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en"></iframe>
I should to change it, because of GTmetrix. So I decide to load it when page is loaded, here is my new code that doesn't load the map.
<iframe id='iframe1' ></iframe>
<script>
window.addEventListener("load", function() {
document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
});
</script>
Note: here is my problem with Gtmetrix, just sharing to complete my question:
There are 5 static components without a far-future expiration date.
https://maps.googleapis.com/maps/api/js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=fa&callback=onApiLoad
https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i10787022&2i6603899&2e1&3u16&4m2&1u543&2u300&5m5&1e0&5sfa&6sus&10b1&12b1&client=google-maps-embed&token=64085
https://khms1.googleapis.com/kh?v=862&hl=fa&x=5267&y=3224&z=13
https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71592679292299&2d51.45263317535978&2m2&1d35.73212757327154&2d51.488170370963076&2u16&4sfa&5e0&6sm%40496000000&7b0&8e0&11e289&callback=xdc._ng5r7i&client=google-maps-embed&token=4563
https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71552264420163&2d51.46028412421049&2m2&1d35.73193943495472&2d51.48040793223049&2u13&4sfa&5e2&7b0&8e0&11e289&callback=xdc._iyqfq0&client=google-maps-embed&token=32784
There is 1 redirect
https://maps.google.com/maps?... redirects to https://www.google.com/maps/embed?...
Using your code:
<iframe id='iframe1' src="about:blank"></iframe>
<script>
window.addEventListener("load", function() {
document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
});
</script>
There is a message in the javscript console:
Refused to display 'https://www.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z%3D14&ie=UTF8&output=embed&hl=en' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
However, if the <iframe> is created dynamically also, it works (note that the source is set before it is appended to the DOM):
<script>
window.addEventListener("load", function() {
var iDiv = document.createElement('iframe');
iDiv.id = 'iframe1';
iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
document.getElementById("anchor").appendChild(iDiv);
});
</script>
code snippet:
<div id="anchor"></div>
<script>
window.addEventListener("load", function() {
var iDiv = document.createElement('iframe');
iDiv.id = 'iframe1';
iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
document.getElementById("anchor").appendChild(iDiv);
});
</script>
Related
I have an iframe and I want to add a div to it using JavaScript. But it's not showing up. What am I doing wrong?
<html>
<body>
<iframe
id="zzz"
srcdoc="<html><h1>hello</h1><button>click </button> <button>btn 2</button></html>"
width="500"
height="500">
</iframe>
<script>
let myiframe = document.getElementById("zzz").contentWindow.document;
let mydiv = myiframe.createElement("div");
mydiv.style.background = "red";
mydiv.style.width = "300px";
myiframe.body.appendChild(mydiv);
</script>
</body>
</html>
I'm running this on my local server using VSCode live server extension and I also ran it on w3schools tryit editor too:
See, no red div here!
Edit 1:
Okay, I checked the DOM too. Still nothing here...
Chrome likes a load event - also we can use document.getElementById("zzz").contentDocument;
https://jsfiddle.net/mplungjan/ju8t6xoq/
Stacksnippets will not allow accessing the iFrame
window.addEventListener("load", function() {
let myiframeDocument = document.getElementById("zzz").contentDocument;
let mydiv = myiframeDocument.createElement("div");
mydiv.style.background = "red";
mydiv.style.width = "300px";
mydiv.style.height = "300px";
mydiv.textContent = 'bla'
myiframeDocument.body.appendChild(mydiv);
});
How can we change the styling of a iframe that is loaded trough JavaScript?
The script is loaded trough:
We would like to hide a navigation bar with class .navbar
Already tried the following but that does not work:
<script type="text/javascript">
window.onload = function() {
let myiFrame = document.querySelector('iframe');
let doc = myiFrame.contentDocument;
doc.body.innerHTML = doc.body.innerHTML + '<style>.navbar {display:none !important;}</style>';
}
</script>
Any ideas?
I am trying to show some video files in an Iframe for our company web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe.
The javascript file I use is this :
<script type="text/javascript">
function ChangeVideoUrl(url)
{
document.getElementById("video_iframe").src = url;
}
</script>
and in I wrote this :
<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a>
Any Ideas?
You can change the actual title of the iframe with iframeReference.contentDocument.title = 'some title'. If you want to change an html title like a h1 tag, you can get the reference to it and set its textContent. See below.
Sample Markup:
<button id="myBtn">Change Iframe</button>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
Sample JavaScript:
var myBtn = document.getElementById('myBtn');
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
myBtn.addEventListener('click', changeIframe);
function changeIframe() {
myIframe.contentDocument.title = 'New title!';
h1Title.textContent = 'New Title!';
}
Live demo (click).
As you have now updated your question with your code, there is more to say.
First, inline js (JavaScript inside your html elements) is bad. Read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F
Instead, follow my example and get element references and attach event listeners to them. You can store your data on the element and pull it from there if you want to.
Live demo (click).
Markup:
<div class="links">
<a data-src="a/video" data-title="A video!">Click to Play: A video!</a>
<a data-src="some/title" data-title="Some Title!">Click to Play: Some Title!</a>
<a data-src="another/title" data-title="Another Title!">Click to Play: Another Title!</a>
</div>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
JavaScript:
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
var links = document.querySelectorAll('.links a');
for (var i=0; i<links.length; ++i) {
addClickFunc(links[i], i);
}
function addClickFunc(elem, i) {
elem.addEventListener('click', function() {
var title = elem.getAttribute('data-title');
var src = elem.getAttribute('data-src');
changeIframe(title, src);
});
}
function changeIframe(title, src) {
myIframe.src = src;
myIframe.contentDocument.title = title;
h1Title.textContent = title;
}
Assuming some heading for title. You can do this also by javascript.
Give the id for the tag that holding the title of iframe.
Using javascript change the text in that when user click's on video link(chnage innerHTML).
I have a website with an iFrame element inside it. Now I need to remove a particular element from the website that is being loaded in the iFrame.
I am using javascript. The link mentioned is in the same server. I loaded the jquery in the head of the site.
<iframe id="ContentiFrame" src="LINK" class="section main" width="998" height="200" frameBorder="0">
</iframe>
<script>
$(this).load("LINK")
$(window).on('load', function()
{
var $iframe = $('#ContentiFrame'); //this is the name of the iframe ... EDITED added #before name
var $contents = $iframe.contents();
var $logo = $contents.find('.logoContainer');
$logo.remove();
});
</script>
For some reason, this is not working for me. Thanks for any help.
You forgot the # on the ID of the iFrame.
Try this:
var $iframe = $('#ContentiFrame');
^
You need to use # for id
var $iframe = $('#ContentiFrame');
Use Jquery scope parameter：
var iframe = $('#ContentiFrame');
var iframebody=$iframe.get(0);
var body=iframebody.contentWindow.document.body;
var logo=$("#ContentiFrame",body);
logo.remove();
I sugget include a jquery.js in iframe page,so you can do like this:
var iframe = $('#ContentiFrame');
var iframebody=$iframe.get(0);
var frameWindow=iframebody.contentWindow;
var logo=frameWindow.$("#ContentiFrame");
logo.remove();
I have the following iframe control (intended to be a facebook like button):
<iframe id="likeButton"
src="http://www.facebook.com/plugins/like.php?href="
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;
width:450px; height:80px;"
onprerender="setupLink()"
</iframe>
I have the javascript function defined above this as follows:
<script type="text/javascript">
function setupLink()
{
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + lblKey.Text;
iframe.attr("src", newSrc);
};
</script>
lblKey is a label on the ASP.NET page that references the specific section of the page. However, as far as I can determine, this function doesn’t get called (if I put an alert() at the start it brings nothing up). I’m new to javascript, but looking around at some articles on the web would indicate that this should update the src property on the iframe.
EDIT:
I have also tried the following:
<script type="text/javascript" >
$(function() {
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + '<%= lblKey.Text %>';
iframe.attr("src", newSrc);
});
</script>
Which doesn't work, but neither does:
<script type="text/javascript" >
$(function() {
alert('Hello');
});
</script>
asp.net events (like prerender) don't apply anywhere else (like javascript)
assuming you are using jquery, I would wrap that in a $(), which is a shorthand for "Execute the following as soon as the page has loaded enough to start manipulating it". Also, asp.net controls have a different api then dom elements, so if you want to use that api you need to wrap it in a scriptlet tag
<script type="text/javascript">
$(function ()
{
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + "<%= lblKey.Text %>";
iframe.attr("src", newSrc);
});
</script>
Have you considered using the onload event and passing a reference to the iframe?
<script type="text/javascript">
function change_source(iframe)
{
if (iframe.src.indexOf('facebook') < 0)
{
iframe.src = 'http://www.facebook.com/plugins/like.php?href=<%= lblKey.Text %>';
}
}
</script>
HTML something like this...
<iframe id="likeButton"
src="about:blank"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;
width:450px; height:80px;"
onload="change_source(this);"
</iframe>