Develop Reference

How to get the current page url from iframe and display on the browser

i have two domains. One for selling products that is https://sellproducts.com and the other for product documentation that is https://docs.product.wiki
In https://sellproducts.com i have page called docs ( https://sellproducts.com/docs) which i used iframe to call or display contents from https://docs.product.wiki
<iframe id="docs" src="https://docs.product.wiki/" frameborder="0">
</iframe>
The https://docs.product.wiki have many pages example,
https://docs.product.wiki/intro.html
https://docs.product.wiki/about.hml
i want to use javascript or jquery to get the current url from iframe and display it in the browser like " https://sellproducts.com/docs?page=intro", when a page is clicked on or reloaded.

If you can put some js on both side it's possible.
In order, there the logic you needs:
Create/Get iframe element -> document.createElement
Parse URL -> URLSearchParams
Catching click event on iframe's link -> createEventListener
Manage main window location -> window.top and window.location
Following could be a good start:
On your https://sellproducts.com/docs put this code:
window.onload = function(e) {
const docsUrl = 'https://docs.product.wiki/';
const queryString = window.location.search; //Parse URL to get params like ?page=
let iframe;
if(document.querySelector('iframe').length) //If iframe exit use it
iframe = document.querySelector('iframe');
else
iframe = document.createElement('iframe'); //Create iframe element
iframe.src = docsUrl; //Set default URL
iframeframeBorder = 0; //Set frameborder 0 (optional)
if (queryString !== '') {
const urlParams = new URLSearchParams(queryString); //Convert to URLSearchParams, easy to manipulate after
const page = urlParams.get('page'); //Get the desired params value here "page"
iframe.src = docsUrl+page + '.html'; //Set iframe src example if ?page=intro so url is https://docs.product.wiki/intro.html
}
if(!document.querySelector('iframe').length)
document.body.appendChild(iframe);//Append iframe to DOM
}
And the https://docs.product.wiki side put this code in your global template (must be on all pages):
let links = document.querySelectorAll('a'); //Get all link tag <a>
links.forEach(function(link) { //Loop on each <a>
link.addEventListener('click', function(e) { //Add click event listener
let target = e.target.href; //Get href value of clicked link
let page = target.split("/").pop(); //Split it to get the page (eg: page.html)
page = page.replace(/\.[^/.]+$/, ""); //Remove .html so we get page
let currentHref = window.top.location.href; //Get the current windows location
//console.log(window.location.hostname+'/docs?page='+page);
window.top.location.href = 'https://sellproducts.com/docs?page='+page; //Set the current window (not the frame) location
e.preventDefault();
});
});
Feedback appreciated :)

new html file to be created in the same folder in which HTML is present

i want the new html file to be created in the same folder in which HTML is present. please help me. am searching a lot , no luck
<script>
function makeDocument() {
var doc = document.implementation.createHTMLDocument("newdoc");
var p = doc.createElement("p");
p.innerHTML = "This is a new paragraph.";
try {
doc.body.appendChild(p);
} catch(e) {
console.log(e);
}
var opened = window.open("");
opened.document.write(doc);
}
</script>

Use a back-end server. Because the HTML page and the scripts are executed on the client-side. You can't really create a file on the client-side while the page is loaded in a browser.
The other way around, you won't want the client to create arbitrary files on the server as well. It poses a great security risk and might lead to possible remote code execution (RCE).

You do not have a closing brace on your function
<script>
function makeDocument() {
var doc = document.implementation.createHTMLDocument("newdoc");
var p = doc.createElement("p");
p.innerHTML = "This is a new paragraph.";
try {
doc.body.appendChild(p);
} catch(e) {
console.log(e);
}
var opened = window.open("");
opened.document.write(doc);
}
</script>
As for the wording of your question, if you are asking to create a new file that gets saved, then Aviv Lo's answer is what you need

How to add an id to the path of an svg in a webpage?

Here is my webpage:
<html>
<head>
<title>Bin Labeler</title>
</head>
<body>
<embed class="emb" src="racks.svg" style="position: relative;
width:100%;
height:100%"/>
<script>//<![CDATA[
// wait until all the resources are loaded
window.addEventListener("load", findSVGElements, false);
// fetches the document for the given embedding_element
function getSubDocument(embedding_element)
{
if (embedding_element.contentDocument)
{
return embedding_element.contentDocument;
}
else
{
var subdoc = null;
try {
subdoc = embedding_element.getSVGDocument();
} catch(e) {}
return subdoc;
}
}
function findSVGElements()
{
var elm = document.querySelector('.emb');
var subdoc = getSubDocument(elm);
if (subdoc)
var paths = subdoc.querySelectorAll("path");
paths.forEach(function(path){
path.addEventListener('click',function(e){
var bin_id = prompt("What ID belongs to this rack?","Enter here...");
e.target.id=bin_id;
path.setAttribute('fill','green');
console.log(e.target);
})
});
}
//]]>
</script>
</body>
</html>
As you can see, its loading the svg xml into my findSVGElements function and then adding an event listener where for each one, an alert shows up asking for the id. Then I am setting e.target.id hopefully to add the id element to the svg. Then when I do "View Frame source" which gives the svg and all of its paths, I am hoping that the bin_id that the user types in to the alert box becomes the id attribute for that path element. However, it does not seem to do this when I View Frame source, I am simply viewing the original svg that was loaded to the page.
How can I do this?

Adding a video to new page

I have a script that runs if a button is pressed that creates a new window with a new button. I want to add a video to this page, how can I do that? This is the script that creates the page. Very new to html/javascript sorry if this is a stupid question
var w = window.open(''),
button = w.document.createElement('button');
button.innerHTML = 'Start Test';
button.addEventListener('click', function () {
w.alert('!');
});
var container = w.document.createElement('div');
container.id = 'buttonParent';
w.document.body.appendChild(container);
container.appendChild(button);

You should be able to add this to the page using HTML video tags:
http://www.w3schools.com/html/html5_video.asp

How to change the title of an Iframe dynamically?

I am trying to show some video files in an Iframe for our company web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe.
The javascript file I use is this :
<script type="text/javascript">
function ChangeVideoUrl(url)
{
document.getElementById("video_iframe").src = url;
}
</script>
and in I wrote this :
<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a>
Any Ideas?

You can change the actual title of the iframe with iframeReference.contentDocument.title = 'some title'. If you want to change an html title like a h1 tag, you can get the reference to it and set its textContent. See below.
Sample Markup:
<button id="myBtn">Change Iframe</button>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
Sample JavaScript:
var myBtn = document.getElementById('myBtn');
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
myBtn.addEventListener('click', changeIframe);
function changeIframe() {
myIframe.contentDocument.title = 'New title!';
h1Title.textContent = 'New Title!';
}
Live demo (click).
As you have now updated your question with your code, there is more to say.
First, inline js (JavaScript inside your html elements) is bad. Read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F
Instead, follow my example and get element references and attach event listeners to them. You can store your data on the element and pull it from there if you want to.
Live demo (click).
Markup:
<div class="links">
<a data-src="a/video" data-title="A video!">Click to Play: A video!</a>
<a data-src="some/title" data-title="Some Title!">Click to Play: Some Title!</a>
<a data-src="another/title" data-title="Another Title!">Click to Play: Another Title!</a>
</div>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
JavaScript:
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
var links = document.querySelectorAll('.links a');
for (var i=0; i<links.length; ++i) {
addClickFunc(links[i], i);
}
function addClickFunc(elem, i) {
elem.addEventListener('click', function() {
var title = elem.getAttribute('data-title');
var src = elem.getAttribute('data-src');
changeIframe(title, src);
});
}
function changeIframe(title, src) {
myIframe.src = src;
myIframe.contentDocument.title = title;
h1Title.textContent = title;
}

Assuming some heading for title. You can do this also by javascript.
Give the id for the tag that holding the title of iframe.
Using javascript change the text in that when user click's on video link(chnage innerHTML).