I am not sure if this is possible or not... I am trying to replace a specific part of a URL from my iframe with a string that is part of the mainframe's URL parameter.
i.e. I am trying to dynamically replace the iframe google sheets public URL ID to render the sheet associated with the mainframes parameter.
Mainframe URL: www.mysite.com?sfds654fsgfg6sfg54gfhghdf6
iframe src= "https://docs.google.com/spreadsheets/d/e/[google id to insert here dynamically from mainframe]/pubhtml?
Intended Final Result
iframe src= "https://docs.google.com/spreadsheets/d/e/sfds654fsgfg6sfg54gfhghdf6/pubhtml?
javascript is my limitation as well
Thanks,
I'll assume you have the id you want to use as a variable and you also have a place in your page where you want to place this iFrame.
var url_string = window.location.href;
var url = new URL(url_string);
var id= url.searchParams.get("id"); //Or whatever your url parameter is called.
var iFrameDestination = document.getElementbyId("#iframeDest");
var ifrm = document.createElement('iframe');
ifrm.setAttribute('src', 'https://docs.google.com/spreadsheets/d/e/'+id+'/pubhtml');
iFrameDestination.appendChild(ifrm);
Related
I am looking for a simple way (using JavaScript) to get part of the page URL to be added to the end of the iframe src URL.
Example, page URL: www.example.com/?id=XYZ
Then I need the XYZ part, which is the the ID to be added to the iframe src like so:
And iframe src: www.otheradress.com/XYZ
You can get the query string from your route with window.location.search (only what comes after the '?', included), and you can parse the parameters with the URLSearchParams like this const params = new URLSearchParams(window.location.search);.
After that, params is an object with specific methods, and you can obtain your param by name with params.get('id');.
So you only need to concatenate your base URL and this parameter and pass it to the src attribute of the iframe.
Complete example:
const baseIframeUrl = 'www.otheradress.com/';
const urlParams = new URLSearchParams(window.location.search);
document.getElementById('#yourIframe').src = baseIframeUrl . urlParams.get('id');
If you wanted to use the src attribute from the HTML, it would be:
const urlParams = new URLSearchParams(window.location.search);
document.getElementById('#yourIframe').src = document.getElementById('#yourIframe').src . urlParams.get('id');
Though be aware that this approach would fail when called multiple times unless you store somewhere the original URL.
Also, as pointed out by mplungjan, you cannot access the src of an iframe of another origin.
I would use URL and URLSearchParams
NOTE: You cannot READ the iFrame src from an iframe that has loaded a page from another origin for security reasons
const url = new URL("https://www.example.com/?id=XYZ"); // new URL(location.href);
const id = url.searchParams.get("id")
console.log(id)
const iFrameUrl = new URL("https://www.otheradress.com/")
iFrameUrl.pathname+=id;
console.log(iFrameUrl.toString()); // here you can set the source of the iFrame
I have a url path as shown below.
http://localhost:12534/urlpart1/urlpart2?querystring=140
So I need to replace the "urlpart2" with the "urlpart3" by using javascript or anugularjs.How can I do that.I can get the whole url by using:
var urlPath = window.location.href;
Any help would be highly appreciated.
If you just need to replace specific substring urlpart2 you can go with simple replace method:
var urlPath = window.location.href;
var newUrlPath = urlPath.replace('urlpart2', 'urlpart3');
This is an example URL.
http://stackoverflow.com/questions/ask?a=1&b=2
question: I need to fetch path name along with url values like this/questions/ask?a=1&b=2
I need jquery or javascript solution
var url = document.createElement('a');
url.href = 'http://stackoverflow.com/questions/ask?a=1&b=2';
alert(url.pathname + url.search);
Demo: http://jsfiddle.net/karim79/8XYYj/
I've tried a few different things but nothing really worked, basically i need to get the current location/url from the iframe, get the part i want and return it to the hash in the url. how can i do this in javascript?
Select the correct iframe element, pull out the src attribute, do your stuff, assign src to window.location.hash
var iframe = $('iframe');
var src = iframe.attr('src');
window.location.hash = src;
EDIT
If you want to get dynamic location from an iframe you have to access contentWindow property:
var iframe = $('iframe');
var contentWnd = iframe.attr('contentWindow');
var url = contentWnd.window.location.href;
window.location.hash = url;
also interesting reading on getting the contentWindow property:
http://www.bennadel.com/blog/1592-Getting-IFRAME-Window-And-Then-Document-References-With-contentWindow.htm
I need a javascript bookmark to take the url I have in the clipboard parse out the 2 numbers and create a new url, and add a link to the top of the page, that when clicked adds the url to my bookmark menu.
Say I have url's like these
http://www.website.com/frontpageeditor.jhtml?sectionID=2844&poolID=6276
javascript:getPoolPageUrl(9800,22713)
Then I need to add the numbers to this url
javascript:frames['content'].getPoolPageUrl(9800,22713)
and then add the url to the top of the frame "content".
I have tried forever on this, but I can't figure out it out.
Update
I've put something together, to show you what I need. This one doesn't work though. Any ideas why?
var url = window.clipboardData.getData('Text');
var reg = /(\d+)/g;
var matches = url.match(reg); //returns ["2844","6276"]
var newUrl = "javascript:frames['content'].getPoolPageUrl("+matches[0]+","+matches[1]+")";
var link = document.createElement('a');
link.src = newUrl;
frames['content'].document.body.appendChild(link);
Update2
This works. Any changes I can do to make it even better?
var url = window.clipboardData.getData('text');
var matches = url.match(/(\d+)/g);
var link = frames['content'].document.createElement('a');
link.href = "javascript:frames['content'].getPoolPageUrl("+matches[0]+","+matches[1]+")";
link.innerHTML = document.title;
frames['content'].document.body.appendChild(link);
Ok, first of all I think you cannot retrieve the text from clipboard from java script, my guess that it would be a major security issue if you can.
Let's assume you have the clipboard in a string you can call this function:
var url = "http://www.website.com/frontpageeditor.jhtml?sectionID=2844&poolID=6276"; //clip
var reg = /(\d+)/g;
var matches = url.match(reg); //returns ["2844","6276"]
var newUrl = "javascript:frames['content'].getPoolPageUrl("+matches[0]+","+matches[1]+")";
frames['content'].document.getElementById("linkPlaceHolderWhereYouWantToAdd").href=newUrl;
You're creating the element in one document, and then appending it to a child located in another document. This doesn't work. You need to create the element in the document that you're going to be adding it to.
Also, the a object doesn't have a src member, it uses href.
Eg:
var link = frames['content'].document.createElement('a');
link.href = newUrl;
link.innerHTML = newUrl;
frames['content'].document.body.appendChild(link);
Do note however, that window.clipboardData is IE-specific code.
JavaScript is not permitted to access the clipboard's contents for one reason alone: Security.
If you accidentally copied your credit card number or some other personally-identifying information into your clipboard, and you visited a malicious website, it could easily snatch up your clipboard and send it off to the server before you even knew there was a risk. So, browser developers explicitly forbid it.