Develop Reference

Loading new iframe into javascript collapse without toggling

I have two links - each should load a different HTML file respectively into an iframe. They will be loaded into the same javascript collapse area. I want each link to load the designated file into the iframe when clicked.
My problem is that IF one html file is loaded into the open (show) collapse area, the collapse area will toggled closed if I click on the second link. I suppose I need an if/then js script but am unsure of the proper logic and syntax?
It should operate logically as expected:
1) If the collapse area is closed (which it is by default), when any link is clicked, it should OPEN and then load in the iframe contents (HTML file)
2) If I click the second link while the collapse is open, it should STAY open (not toggle closed) and simply load in the second iframe contents (HTML file)
What I have below works fine for 'loading' the proper content, but it toggles by default. So if I have the area open with content loaded, it closes if I click the second link.
here are my snippets:
LINK 1
LINK 2
<div id="content" class="collapse">
<p><iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe></p>
</div>
Any suggestions or samples would be helpful... Thank You

I'm going to use websites to demo a solution for your question. The snippet doesn't display the results but you can view a fiddle here. A second solution is here (shown in second snippet); it is specific to your two files. You may have to add a path.
These are fairly primitive solutions but as you are only switching between two files, perhaps this may suffice for your needs.
(I set a background colour for the div (not the iframe).. remove this if you wish..)
function togglediv(filename) {
var frme = document.getElementById("process_frame");
var file2 = filename;
if (file2 == " " || filename == undefined) {
frme.src = "http://www.richmondinnireland.com";
file2 = frme.src;
} else {
frme.src = filename;
file2 = frme.src;
}
//console.log(file2)
// display frame is hidden
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = file2;
}
}
#content {
background-color: lightgrey;
height: 280px;
overflow: auto;
}
#process_frame {
height: 280px;
overflow: auto;
width: 100%;
z-index: 0;
}
LINK 1
LINK 2
<br><br>
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
</script>
#process_frame {
height: 280px;
overflow: auto;
width:100%;
}
#file1,
#file2 {
display: inline-block;
margin: 5px;
}
File 1
File 2
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
function togglediv(num) {
var frme = document.getElementById("process_frame");
var fileid = num;
var filename = "html_file_";
var filetoget = '"' + filename + num + ".php" + '"';
console.log(filetoget);
// check if frame is hidden
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = getfile;
} /*else {
//frme.style.display = 'none';
}*/
}
</script>

navigator.online show iframe and when offline show image

Need help to display a cached image (service worker) when no internet connection, in place of my iframe - herewith my not working attempt in fiddle
<https://jsfiddle.net/hrax5doq/10/>
In fiddle I used an external image location just as an example but how do I use a cached imaged url in my code

Like this :
if (window.navigator.onLine) {
d.innerHTML = '<iframe id="iframe" src="https://maps.google.it/maps?q=Inprint Printers,25+Watermeyer+st,eMalahleni,Mpumalanga,1035&output=embed" allowfullscreen></iframe>';
} else {
d.innerHTML = '<img scr="https://upload.wikimedia.org/wikipedia/commons/2/23/User-Chaza93-Offline.png">';
}
iframe {
width: 100%;
height: 600px;
scrolling: no;
marginheight: 0;
marginwidth: 0;
frameborder: 0;
border: 0;
}
<div id="d"></div>

Using JavaScript Variables in HTML code

I'm pretty new to JavaScript.
I'm trying to make a YouTube 2.0 html thing, (interesting learning experience). I want it to be so that you click on the "load video" link and it asks you the link to the actual youtube video. Then, when you paste it in, it displays the video on the page.
My code is
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<script>
var theVideoLink;
var openVideo = function() {
var videoLink = prompt("Video link on YouTube.com");
theVideoLink = videoLink;
};
window.onload = function() {
document.getElementById("myLink").innerHTML=theVideoLink;
}
</script>
<iframe width="1120" height="630" src="myLink" frameborder="0" allowfullscreen></iframe>
If you have any ideas on how I can insert the JavaScript variable into my iframe src tag, please tell me. Thanks!

You can't change iframe src but we can replace your iframe with new one.
Note, I have set your iframe ID as myLink, replacing the src attribute.
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<iframe width="1120" height="630" id="myLink" frameborder="0" allowfullscreen></iframe>
<script>
openVideo = function() {
var videoLink = prompt("Video link on YouTube.com");
var iframe=document.getElementById('myLink');
var new_iframe = document.createElement("iframe");
new_iframe.src=videoLink;
let attr;
let attributes = Array.prototype.slice.call(iframe.attributes);
while(attr = attributes.pop()) {
if (attr.nodeName!='src')
new_iframe.setAttribute(attr.nodeName, attr.nodeValue);
}
iframe.parentNode.replaceChild(new_iframe, iframe);
}
</script>
Make sure to embed the embed link, in this format:
https://www.youtube.com/embed/MEVYajbHmb4
Working JS fiddle :
https://jsfiddle.net/aa0kzqsz/2/

In your code, the iframe is wrong. You need to specify "myLink" as id not as src.
Then you need to transform the youtube link (which is like "https://www.youtube.com/watch?v={videoId}") into the iframe link (which is like "https://www.youtube.com/embed/{videoId}"). To achieve this you need to learn about regexp. The following will work:
var ytLink = prompt('Give me a youtube link please !');
var iframe = document.getElementById('youtube');
var ytId = ytLink.match(/v=([-A-Za-z]+)/)[1];
iframe.src = 'https://www.youtube.com/embed/' + ytId;
<iframe width="560" height="315" src="" id="youtube" frameborder="0" allowfullscreen></iframe>
I recommend you to learn more about regex on the MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

This code navigates the <iframe> to URL that typed in prompt dialog.
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<script>
var openVideo = function() {
var videoLink = prompt("Video link on YouTube.com");
window.open(videoLink, "myLink");
}
<iframe width="1120" height="630" name="myLink" frameborder="0" allowfullscreen></iframe>
Update: This code only navigates <iframe> to given URL. You should probably use Youtube embed options instead of this.

You must use embed link instead of full link
like: https://www.youtube.com/embed/videoID
var openVideo = function() {
var videoID = prompt("Video id on YouTube.com");
var embed = 'https://www.youtube.com/embed/'
document.getElementById("myFrame").src=embed+videoID;
};
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<iframe id=myFrame width="1120" height="630" src=# frameborder="0" allowfullscreen></iframe>

catching DOm elements

hi Guys I need help with catching a img tab in side of the p tag
this is my html
<p>
<img style="max-width: 100%; margin-left: auto; margin-right:
auto; display: block;"
src="../content_platform_node/content_primitive/51e4c3e29306e2581000000a/blob"
alt="" data-lscp-resource-mimetype="image/jpeg"
data-lscp-resource-id="51e4c3e29306e2581000000a" />
</p>
what I need is to wrap the img tab with a tag instead of p tag , note this is not pre-generated its user input content therefore I need to do this with jquery or javascript
help needed

You can try something like
var parent = $('img').parent();
parent.wrap('<div />').contents().unwrap()
and the div can be any other tag

var image = $('img[data-lscp-resource-id="51e4c3e29306e2581000000a"]');
image.parent('p').replaceWith($('<a></a>').html(image));
Fiddle
EDIT: raw js:
var image = document.getElementsByTagName('img')[0];
var oldParent = image.parentNode;
var newParent = document.createElement('a');
newParent.appendChild(image);
oldParent.parentNode.appendChild(newParent);
oldParent.parentNode.removeChild(oldParent);
Fiddle

How to add CSS class and control elements inside of the Iframe using javaScript.?

How to add CSS class and control elements inside of the Iframe using javaScript.
<iframe width="340" scrolling="no" height="37" src="http://www.indiansplash.com/business/include/dash11i.php" id="ifr" hspace="0" marginwidth="0" marginheight="0" vspace="0" style="width: 585px; height: 47px; border: #dddddd 1px solid"></iframe>
Here is my code. http://jsfiddle.net/wV8gF/
Here i want to hide first column which are having BSE logo and i want to change the color of values.

Try this. It may useful.
http://jsfiddle.net/wV8gF/3/

The DOM includes a frames collection you can access with JavaScript:
You'd need a name attribute on your iframe tag
<iframe name = "myFrame"
width="340" scrolling="no" height="37"
src="http://www.indiansplash.com/business/include/dash11i.php"
id="ifr" hspace="0" marginwidth="0" marginheight="0" vspace="0"
style="width: 585px; height: 47px; border: #dddddd 1px solid">
</iframe>
Then you can access it like this:
var myFrame = frames["myFrame"]
You can apply a new stylesheet to the content by following the example here: How to apply CSS to iframe?
UPDATE
Following the example in the reference i cited above:
var cssLink = document.createElement("link")
cssLink.href = "iframeStyles.css"; /* change this to the url for a stylesheet targetting the iframe */
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['myFrame'].document.body.appendChild(cssLink);
Then in iframeStyles.css:
td{border:1px solid red;} /*or whatever*/
You may need a selector with stronger specificity, or apply !important to styles to overide already existing declarations.

Try to use the following code:
var my_td = $("#table_id tr td", $("#iframe_ID").contents());
Hope this works... Muhammad.