I have converted an excel file to an .htm file.
In the excel file are links.
I have embedded the .htm file in my website
These links should be open in a new tab and not in the iframe.
How can I do this?
target="_blank" didn't work.
<iframe src="website.htm" style="border:none;" width="100%" height="300">
</iframe>
This also not worked:
<script src="https://code.jquery.com/jquery-latest.js"></script>
<iframe src="website.htm" style="border:none;" width="100%" height="300">
</iframe>
<script>
$('iframe a').attr('target', '_blank');
</script>
You could try
<iframe src="website.htm" style="border:none;" target="_top" width="100%" height="300">
</iframe>
Using jQuery:
$('iframe a').attr('target', '_blank');
Try it like below:
var linkList = [iframeElement].contentWindow.document.getElementsByTagName("a");
for (var i = 0; i < linkList.length; i++) {
linkList[i].target = "_blank";
}
Related
I want to embed external link to my anchor tag with javascript.
When i press on achor tag, which is actually an image, i want to load < iframe > with that external link.
Firstly i need iframe to be hidden and only show when the anchor tag is clicked.
This is what i have so far:
html
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="img/icon.png">
js
function openUrl(){
var myUrl = "https://www.youtube.com/embed/zBFGkUmVkAs";
document.getElementsByName('myIframe')[0].src = myUrl;
}
});
But it doesn't work
Any help please?
Thanks!
#aiden87
Try this code below, I have made a demo please check this link. https://jsfiddle.net/saujankmarv/p7z38rhq/8/
html:
<a href="#" id="atag">
<img src="img/icon.png">
<iframe style="display:none;" id="myFrame"></iframe>
</a>
js
var openUrl = function() {
console.log('log');
var iframe = document.getElementById("myFrame");
iframe.src = "https://www.youtube.com/embed/zBFGkUmVkAs";
iframe.style.display = "block";
}
document.getElementById('atag').addEventListener('click', openUrl);
You can try this:
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
iframe.attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
}
<a href="#" onclick="openUrl();">
<img src="img/icon.png">
</a>
<iframe width="560" height="315" id="myFrame" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none">
</iframe>
Try this.
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
}
<img src="img/icon.png">
<iframe width="560" height="315" id="myFrame" src="https://www.youtube.com/embed/zBFGkUmVkAs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none"></iframe>
Inline click handlers are not the best solution , you can hide the iframe initially and then toggle its visibility.
$('a').on('click' , function(){
$(this).find('iframe').attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
$(this).find('iframe').slideToggle(0);
return false;
})
a > iframe {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png">
Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.
Okay I have this working minus the fact of having this working once I call in with fancybox via AJAX.
Static Example Works:
<iframe id="videourl1" width="640" height="340" src="" frameBorder="0"></iframe>
<iframe id="videourl2" width="640" height="340" src="" frameBorder="0"></iframe>
<iframe id="videourl3" width="640" height="340" src="" frameBorder="0"></iframe>
$("div.video-container iframe").each(function(){var idAdd=$(this).attr("id");$(this).attr("src","http://www.youtube.com/embed/"+idAdd+"?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1")})
Now when I take this and pull the 3 iframes into .txt files and call them from an index.html file using fancybox2-ajax call it fails:
Index.html:
<a id="1" class="fancybox fancybox.ajax" href="text/1.txt">Link</a>
<a id="2" class="fancybox fancybox.ajax" href="text/2.txt">Link</a>
<a id="3" class="fancybox fancybox.ajax" href="text/3.txt">Link</a>
Text files contain the iframes:
<iframe id="videourl" width="640" height="340" src="" frameBorder="0"></iframe>
How do I code the JS to say run each time when the iframe is called in by AJAX?
You can use the fancybox callback afterLoad to run javascript after the content is loaded.
However, it does seem unnecessary to jump through all these hoops to load a video instead of just using the media helper:
<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
helpers : {
media : {}
}
});
</script>
});
Answer:
$(".fancybox").fancybox({
afterShow: function () {
$("div.video-container iframe").each(function () {
var idAdd = $(this).attr("id");
$(this).attr("src", "http://www.youtube.com/embed/" + idAd‌d + "?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1")
});
}
});
I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()
I using 3 .asp pages
Page 1 :Parent.asp
page 2 :Subparent.asp
Page 3 :Child.asp
using javascript in the child.asp. I wand to pass data from Child window(iframe) to Parent window
<title>parent.asp</title>
<html>
<body>
<iframe name="I1" frameborder="0" scrolling="no" src="Subparent.asp" width="100"
height="100">
<title>subparent.asp</title>
<html>
<body>
<div id ="parentdata"></div>
<iframe name="I1" frameborder="0" scrolling="no" src="Subparent.asp" width="100" height="100">
<title>subparent.asp</title>
<html>
<body>
<iframe name="I1" frameborder="0" scrolling="no" src="Child.asp" width="100" height="100">
<title>subparent.asp</title>
<html>
<body>
<script language="JavaScript">
{
parent.document.getElementById("parentdata").innerHTML="GET DATA, WORKING"
}
</script>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
In the "Child.asp" i using javascipt. i wand to pass data to the "" of "parent.asp"
is it possible, plz help me
hoping your support
maybe ajax is the best way to do what you need.
but if you still prefer the iframes, you can try:
Parent.asp:
function myFunction(pram1, param2)
{
alert('worked! - param1: '+param1.toString()+' param2: '+param2.toString());
}
Child.asp
top.myFunction(1,2);
for some old-school info on windows and frames: http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/window.html#1200703 which seems, as TeKapa reckons, to still work.