We Keep Coding

Pass all URL querystring parameters to an iframe using JavaScript

I want to pass all parameters from the querystring to an iframe on my page using JavaScript. I created a <div if="zohoframe"> before which the iframe should be inserted. This JavaScript should do the magic but it shows neither an error nor the iframe.
<script type="text/javascript">
const queryString = window.location.search;
var makediv = document.createElement("div");
makediv.innerHTML = '<iframe loading="lazy" width="100%" height="750px" src="SOMEURL' + queryString + '" frameborder="0" allowfullscreen=""> </iframe>';
var getRef = document.getElementById("zohoframe");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);
</script>

Taking HTML content from other URL pages with JavaScript

I want my app to take text from other web pages!
If I insert the word "computer" I want to go to the URL of Cambridge's website and to take data I need.
insertingNewWord(insertedWord){
var pageHTML = "https://dictionary.cambridge.org/dictionary/english/"+insertedWord;
var definition = pageHTML.getElementByClasName("def-head");
return definition;
}
Any idea how I could take any tag by Class or ID name from another page, and printed in my app.
If I get a solution in ReactJs that would be even better.

One option is to use an <iframe>
<input type="text"><input type="button" value="search dictionary"><br>
<iframe width="400" height="300"></iframe>
<script>
const [input, button] = document.querySelectorAll('input');
const iframe = document.querySelector('iframe');
button.addEventListener('click', e => {
iframe.src = "https://dictionary.cambridge.org/dictionary/english/" + input.value;
})
</script>

Generating a Unique Id for each Iframe, or building an Iframe out of DOM nodes

I need to set a unique Id for each Iframe so they render correctly. I have a renderId variable that increments. I'm trying to append that to the Iframe Id.
document.getElementById('iframe-test' + renderId);
Entire code block here:
let renderId = 0;
const render = post => {
renderId++;
const node = document.createElement('div');
node.innerHTML = `
<h2 class="centered">
<a href="${post.link}">
<br>
<iframe id="iframe-test" width="100%" min-height="100%" src="">
</iframe>
<br>
${post.title}
</a>
<br><br>
</h2>`;
app.appendChild(node);
document.getElementById('iframe-test' + renderId);
No videos are showing. I've tried changing the quotes on this line:
<iframe id="iframe-test" width="100%" min-height="100%" src="">
I need some extra steps before this line, but I'm not sure what.
document.getElementById('iframe-test' + renderId);
Full app: http://codepen.io/Teeke/pen/BWROeW

'<iframe id="iframe-test"'+renderId.toString()+' width="100%" min-height="100%" src="">' EDIT: You just forgot to give a different Id to each div. You was looking for an id that was not assigned so I added the renderId.toString. Maybe it will work without toString. Not sure

Create your 'unique' id in a variable at the top of the function:
let renderId = 0;
const render = post => {
renderId++;
const iframeId = `iframe-test-${renderId}`;
const node = document.createElement('div');
node.innerHTML = `<h2 class="centered">
<a href="${post.link}"><br>
<iframe id="iframe-test" width="100%" min-height="100%" src="">
</iframe>
<br>${post.title}
</a>
<br><br>
</h2>`;
app.appendChild(node);
document.getElementById(iframeId);
}
Alternatively, you could use the YouTube reference as the id like this:
// post.link (https://www.youtube.com/watch?v=TmIo702wjm4)
const uniqueId = `iframe-test-${post.link.substr(post.link.lastIndexOf('v=') +2)}`;
// iframe-test-TmIo702wjm4

I ended up building the iframe out of DOM nodes. This way I could build a easily repeating iframe without having to generate a unique ID for each frame. This doesn't actually generate an ID as per the original question, but it does allow you to copy an Iframe div with no unique ID issues. I amended the title of the question to reflect this broader solution.
HTML:
<div id="app"></div>
JS:
const app = document.querySelector('#app');
const render = post => {
const node = document.createElement('div');
node.innerHTML= `${post.title}`;
node.className= 'clip-title';
app.appendChild(node);
var a = document.createElement('iframe');
a.className = "clip-content"
a.src = "https://www.youtube.com/embed/" + strippedURL; //add your iframe path here
a.width = "100%";
a.height = "100%";
a.padding = "500px";
app.style.textAlign = "center";
document.querySelector('#app').appendChild(a);

set src="id" iframe taking src by url.com/id

i'm tryng to set a src of an iframe taking the url from the toolbar address.
the address if composed by the domain + id (that is the same of the youtube id)
example
www.youtube.com/whatch=id
my domain is = www.domain.com/?id (the id is the same)
this my hypothetically script
<script type="text/javascript">
var segment_str = window.location.pathname;
var segment_array = segment_str.split( '/' );
var last_segment = segment_array[segment_array.length - 1];
alert(last_segment);
var iframe = document.getElementById("youtube");
iframe.src = www.youtube.com/watch=last_segment;
</script>

Maurizio Grasso!
#LGSon is almost right — you have to use quotes while setting iframe.src.
But if your domain is www.domain.com/?id (with question mark) you have to use window.location.search to get URL parameters instead of window.location.pathname, so your script becomes something like:
var id = window.location.search.slice(1);
iframe.src = 'www.youtube.com/watch=' + id;

Display Only the List of a YouTube Playlist Page

If I have a playlist url, say "https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" and I put it in an iframe with:
<iframe src="http://www.youtube.com/playlist?list=UUK376qNDlNZZDNHsnaWuTeg" width ="1920" height="1080"></iframe>
I get a blank iFrame, so how do I fix that? Also, I only want to display the "pl-video-list" div, not the rest of the web page. The other responses on stackoverflow were all website specific, or didn't seem to work.

Another option extract playlist using JQuery
<script>
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/UUK376qNDlNZZDNHsnaWuTeg?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
list_data += '<br><br>'+ feedTitle+'';
});
$(list_data).appendTo(".playlist");
});
</script>
<ul class="playlist"></ul>
http://jsfiddle.net/jamie8763/g5unx78b/

This probably isn't the answer your were looking for but <iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" frameborder="0" allowfullscreen></iframe> allows you to view the first video in the playlist with a dropdown to view the rest of the playlist.
As for your blank iframe, I am getting the following error when I try it.
Refused to display
'https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
As far as I know, there isn't a way to scecify a certain div to display in an iframe. It's either all or nothing.