How to add more than one iframe within of a div? - javascript

First, sorry for my english but I'm not native and It's my first post (Yep, I'm new member here).
I have the following HTML and jQuery code:
<div id="info" style="width: 100%; height:280px;">
if (sectores.getVisible()) {
if (url1) {
$('#info').html('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
}
}
if (despachos.getVisible()) {
if (url1) {
$('#info').html('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
}
}
Result:
It works but only show me the last "iframe".
I've thought I need to put "the iframes" within a stack or something similar... But I'm not really sure.
So, I'd like to visualize more than one iframe within of info 'div'.

The recommended way would be to append the iframes into the parent. Typically, when doing that, you empty the parent prior to any append operations:
var $info = $("#info");
$info.empty();
if (sectores.getVisible()) {
if (url1) {
$info.append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
}
}
if (despachos.getVisible()) {
if (url1) {
$info.append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
}
}
If you want to perform fewer DOM modifications or have some special-case, you can build up multiple elements in a string before adding them to the DOM:
var $info = $("#info");
$info.empty();
var info_html = "";
if (sectores.getVisible()) {
if (url1) {
info_html += '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>';
}
}
if (despachos.getVisible()) {
if (url1) {
info_html += '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>';
}
}
$info.html(info_html);

Can you put the second iframe into a second "div"?
I would think that your second one is overriding the first.

Instead of .html() you should use .append() else the second .html() will write the first .html()
if (sectores.getVisible()) {
if (url1) {
$('#info').append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
}
}
if (despachos.getVisible()) {
if (url1) {
$('#info').append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
}
}

You are basically overwriting one piece of code with another when you use .html().
What you should do instead is:
$('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>').appendTo('#info');

Related

Spotify API fetching data slowly on first time

Hi every one I have an html file which is used to fetch data from spotify which render songs of about 30 seconds and play it. The issue is on first time searching the data displays slowly but afterwards that the data render fast.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body style="background-color: white;">
<input type="search" name="song-search" id="song-search" class="search-bar"
placeholder="Enter Artist Name or Song Title"
style="margin-bottom: 2em; font-size:14px; color:#E3AA12; width:85%; margin-left: 1.5em; border-radius:40px;border-color:#a4a4a4">
<button type="submit" onclick="search()"
style="color: #ffffff; font-size: 16px; font-weight: 800;background-color: #786AFD;
margin: 0;
top:50%;
left: 100%; transform: translate(70%, 0%); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-transform:capitalize; border-radius:20px; border-color: #E3AA1200;box-shadow: 0px 0px 5px 1px lightgrey; width: 40%;">Search</button>
<div class="song-list" id="song-list" style="padding-top: 25px"></div>
<script>
async function a(x) {
const y = "https://whispering-shelf-92968.herokuapp.com/api/search/".concat(encodeURI(x));
// console.log(y);
const b = $.get(y, function (data, status) {
// console.log("data " + data + " status " + status);
});
return b;
};
function search() {
const val = document.getElementById('song-search').value;
if (val.length > 0) {
// console.log(val);
const v = a(val).then(x => {
// console.log("first then");
// console.log(x);
return x;
}).then(v => {
// console.log("second then");
// console.log(v);
var stupid = '';
if (v["tracks"]["items"].length >= 6) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[1].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[2].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[3].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[4].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[5].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[6].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[7].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[8].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[9].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
else if (v["tracks"]["items"].length >= 5) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[1].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[2].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[3].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[4].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
else if (v["tracks"]["items"].length >= 3) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[1].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[2].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
else if (v["tracks"]["items"].length >= 1) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
}).then(() => {
document.getElementById('song-search').value = "";
}).catch(err => {
console.log(err);
});
}
return null
};
</script>
</body>
</html>
What's the reason that it is showing data slowly first time.?
I need to make it fast on the first time also.

Busy image keeps loading and response is not considered

We have A Framed Application. In one of the process, when the page is submitted, we show a busy image until the response is received as the process might take 1+ minute.
In IE11, the Application keeps on loading and never shows the result. But it works fine in Chrome, Firefox and IE Compatibility mode. Please see below for the code.
var myTop = form_input();
if (typeof isaTop == 'function' && isaTop().header) {
isaTop().header.busy(parent.form_input)
}
myTop.location.href = request;
function busy(frameObject) {
try {
with(frameObject.document){
// get all the stylesheets from the header
var allStylesheets = this.window.document.styleSheets;
writeln("<html><head>");
// add the css sheets
for(var i = 0; i < allStylesheets.length; i++) {
writeln('<link type="text/css" rel="stylesheet" href="' + allStylesheets[i].href + '" />\n');
}
// add the rest
writeln("</head>\n<body><div id='busy'>\n" +
"<img src='<%=WebUtil.getMimeURL(pageContext, "b2b/mimes/images/busy.gif") %>' alt='<isa:UCtranslate key="b2b.busy.message"/>' />" +
"<p><isa:UCtranslate key="b2b.busy.message"/></p>" +
"</div></body></html>");
}
frameObject.document.close();
}
catch (e) {}
}
<frameset cols="*,15,0" id="fourthFS" border="0" frameborder="0" framespacing="0">
<!--End of edit by Arshid to hide the history frame from startup of application-->
<frameset rows="0,*" id="workFS" border="0" frameborder="0" framespacing="0">
<frame name="documents" src="<isa:webappsURL name="/b2b/updateworkareanav.do" />" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" />
<frame name="form_input" src="<isa:webappsURL name="/b2b/updatedocumentview.do?refresh=1" />" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.forminput"/>" />
</frameset>
<frame name="closer_history" src="<isa:webappsURL name="/b2b/closer_history.jsp" />" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.closerhistory"/>" />
<frame name="_history" src="<isa:webappsURL name="/b2b/history/updatehistory.do" />" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.history"/>" />
<noframes>
<p> </p>
</noframes>
</frameset>
We tried enabling IE Compatibilty mode by putting following code but we are not able to fix the issue.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
Can some one please give us any clues or help?
Thanks,
Srinivas
enter code here

embed external link to anchor tag

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">

Loading of an iframe after another

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()

How can I replace youtube / vimeo url with embed code in javascript code?

I've tried replace youtube and vimeo url with embed code in javascript code.
I've used this code:
EXAMPLE 1:
HTML:
<div id="divContent"></div>
JAVASCRIPT:
$("#divContent").html('http://www.youtube.com/watch?v=t-ZRX8984sc <br /> http://vimeo.com/82495711 <br /> http://youtu.be/t-ZRX8984sc');
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 1: http://jsfiddle.net/88Ms2/301/ - It's not working.
EXAMPLE 2
HTML:
<div id="divContent">
http://www.youtube.com/watch?v=t-ZRX8984sc
<br />
http://vimeo.com/82495711
<br />
http://youtu.be/t-ZRX8984sc
</div>
JAVASCRIPT:
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 2: http://jsfiddle.net/88Ms2/300/ - It's working
I've retrieved a data from database using ajax. I need the data with html code insert into div using javascript. How can I modify the example 1 to the correct code?
In example 1, change the javascript code to:
$('#divContent').contents()
.filter(function(){
return this.nodeType === 3;
})
.map(function(index, text){
$(text).replaceWith(
text.textContent.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
);
})
It should work now.

Categories

Resources