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>
Related
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>
I actually need to disable autoplay on a vimeo iframe embed on a drupal 6 website.
I can't change this settings in the embedmedia module, so I need to use jQuery to do this.
This is the original "src" vimeo content:
<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&show_title=1&show_byline=0&show_portrait=1&autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
I override the height and width attributes with jQuery already.
So I try to do the same for "src" but my code replace the "src" content:
$("#media-vimeo-1 iframe").attr('src','autoplay=0');
How can I preserve the other part of src content and only change the autoplay setting ?
The second parameter to attr can be a function that processes the old value to get a new value:
$("#media-vimeo-1 iframe").attr('src', function (index, oldSrc) {
return oldSrc.replace('autoplay=1', 'autoplay=0');
});
You must get the old src, replace the desired parameters, and then change the src
$(document).ready(function() {
var oldSrc = $("#media-vimeo-1 iframe").attr("src"); //Get the src of the iframe
var newSrc = oldSrc.replace("autoplay=1", "autoplay=0"); //Replace "autoplay=1" by "autoplay=0"
$("#media-vimeo-1 iframe").attr("src", newSrc); //Change the src attr to the new value
console.log("Old Src: " + oldSrc);
console.log("New Src: " + newSrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="media-vimeo-1">
<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&show_title=1&show_byline=0&show_portrait=1&autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
</div>
In your example youre just setting the src attribute to be autoplay=0
What you realistically want to do is grab the current value, replace a value within the string and reassign the value.
Example (There are better ways to do this):
var link = $("iframe").attr('src');
link = link.replace('autoplay=1', 'autoplay=0');
$("iframe").attr('src', link);
Hope this code help you.
var src = $('iframe').attr('src'); <br>
var searchParams = new URLSearchParams(src); <br>
searchParams.set('autoplay','0'); <br>
var newParams = searchParams.toString(); <br>
$('iframe').attr('src', decodeURIComponent(newParams)); <br>
Source code: https://github.com/sendeveloper/stackoverflow/tree/master/javascript_src_autoplay
I need to hide the iframe if the
src is "http://".
What I tried to do:
<script type="text/javascript">
if ( $('iframe[src][src="http://"]') )
document.getElementById('iframe').style.display='none';
else
document.getElementById('iframe').style.display='block';
</script>
and html
<iframe id="iframe" src="url" ></iframe>
You have to change your jQuery selector to iframe[src="http://"] or a better solution is to use CSS to hide your iframe.
When you are working with style related things you should always use CSS instead of javascript.
iframe[src="http://"] {
display: none;
}
<iframe src="http://"></iframe>
<iframe src=""></iframe>
If you want to hide iframes with only src="http://", you can do this with jQuery and some regex.
Note: In Chrome, the src of "http://" is reported as "http:". In Safari and Chrome on iOS it is reported as "http:/". To account for this difference a simple regex can be used.
$('iframe').each(function() {
var src = this.src.toLowerCase();
if (/^http:[\/]{0,2}$/i.test(src)) {
$(this).hide();
} else {
$(this).show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. http://<br><iframe id="iframe" src="http://"></iframe><br>
2. http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png<br><iframe id="iframe" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"></iframe><br>
If you additionally want to hide iframes with src="" or no src set, or src="https://", you can use the code below. The conditional src === self.location.href tests for src="". The regex /^https?:[\/]{0,2}\w/i tests for "http(s)://" plus one word character. If not found, the iframe is hidden. Non-http(s) src'd iframes are hidden too.
$('iframe').each(function() {
var src = this.src.toLowerCase();
if (src === self.location.href || !/^https?:[\/]{0,2}\w/i.test(src)) {
$(this).hide();
} else {
$(this).show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. http://<br><iframe id="iframe" src="http://"></iframe><br>
2. https://<br><iframe id="iframe" src="https://"></iframe><br>
3. http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png<br><iframe id="iframe" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"></iframe><br>
4. ""<br><iframe id="iframe" src=""></iframe><br>
5. (blank)<br><iframe id="iframe"></iframe><br>
6. "a.htm"<br><iframe id="iframe" src="a.htm"></iframe><br>
7. src<br><iframe id="iframe" src></iframe><br>
Try this:
<script>
function checkFrame(){
if($('iframe[src][src="http://"]'))
document.getElementById('iframe').style.display='none';
else
document.getElementById('iframe').style.display='block';
}
</script>
and call the function whenever you need to check it. Perhaps the onLoad parameter on the body tag?
But I must ask, why "else" display it, it by default would be displayed.
Also, what if the value is null?
Well, hope that helps!
You could attach an onload handler to your iframe:
var iframe = document.getElementById('iframe');
iframe.onload = function() {
if(iframe.src == 'http://') {
iframe.style.display = 'none';
} else {
iframe.style.display = '';//default
}
}
I have a dynamic table on a web page and i am calling that page on another application. i am trying to display that table alone and not the whole page. So i wrote a code based on some other answers on stack exchange. But still it shows the whole page. If the table has just 2 rows, then it shows the table with 2 rows and the whole empty page. Not able to figure out whats wrong. Is there any other way ?
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.getElementById("dvMain").offsetHeight + 'px';
// alert(obj.style.height);
}
</script>
<iframe src="www.google.com" width="100%" marginwidth="0" marginheight="0" frameBorder="0" id="iframe" onload='javascript:resizeIframe(this);'>
</iframe>
function tableFromUrl(url, target, before){
url is the file path,
target is an element to append the table to, if there are two arguments.
Or, if a third argument is true, insert the table before the target element.
try{
var O= new XMLHttpRequest(), txt,
div= document.createElement('div');
O.open('GET', url, true);
O.onreadystatechange= function(){
if(O.readyState== 4 && O.status== 200){
txt= O.responseText;
div.innerHTML=txt.substring(t.search(/<table/), t.search(/<\/table>/))+'</table>';
if(before=== true) target.parentNode.insertBefore(div, target);
else target.appendChild(div);
}
}
O.send(null);
}
catch(er){
//error handler
}
}
I have an iframe page within a DIV and I only want the DIV to display once the iframe page is loaded/available. If the iframe page does not load/not available, do not show that DIV at all.
I wrote some JS however it doesn't work as I expected it to, the DIV still display regardless if the iframe page is available or not.
Code:
<div class="ad-container" style="display:none">
<iframe src="//oonagi.org" border="0" scrolling="no" allowtransparency="true" width="500" height="300"></iframe>
</div>
var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
// only show ad once iframe page is loaded
adContainer.find('iframe').load(function() {
adContainer.css('display', 'block');
});
}
you should change iframe src at document.ready inorder to make it fire your iframe load's event.you can try this:
$(document).ready(function() {
$('#frame').bind('load', function() { //binds the event
$('#ad-container').show();
});
var newSrc = $('#frame').attr('src') + '?c=' + Math.random(); //force new URL
$('#frame').attr('src', newSrc); //changing the src triggers the load event
});