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
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 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);
I have attached a pdf to html trough iframe.
Now I try to access elements inside the dom with javaScript.
However normal way to access iframes does not seem to be valid..
Tried various variations. for instance:
var ifrm = document.getElementById('myFrame');
var win = ifrm.contentWindow;
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('findInput');
form.value = 'my string'
So the id="findInput" is the search field in the pdf
It's really hard to form my question title... I'm writing my own windows sidebar gadget , I want to show current moon phase , so I searched in internet for that and I got a websites that shows that :
http://www.iceinspace.com.au/moonphase.html
if I take the image url (http://www.iceinspace.com.au/moon/images/phase_150_095.jpg) and set it in image src attribute:
<img id="CurrentMoon" src="http://www.iceinspace.com.au/moon/images/phase_150_095.jpg"></img>
and I set it again when html document loads in javascript:
function showFlyout(event)
{
document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg";
}
does the picture change if it is changed in internet ??
What you say is correct, if the image at /moon/images/phase_150_095.jpg is replaced by a new image i.e. the image file is changed but the URL of the image remains same your widget would work fine, but as it happens they change the image by changing the image url ( for eg. right now it is phase_150_099.jpg ) , so if you set the src attribute of the img to a fixed URL it will display the same image. The correct solution will be :
1) Make a cross origin request to for the iceinspace using CORS or JSONP, assuming your gadgets origin is not same as www.iceinspace.com
2) Create a document object and get the image element through an XPath lookup like this
function showFlyout(event)
{
url = http://www.iceinspace.com.au/moonphase.html;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('GET', url, true);
xmlhttp.send(null);
moonphasedoc = document.implementation.createHTMLDocument("");
moonphasedoc.open("replace");
moonphasedoc.write(xmlhttp.responseText);
moonphasedoc.close();
var element = moonphasedoc.evaluate( '//body/table/tbody/tr/td[3]/p/table/tbody/tr/td/table[1]/tbody/tr/td[1]/img' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue; //just copied the Xpath from element inspector :D
document.getElementById("CurrentMoon").src = element.src;
}
P.S. This would only work if you have Access-Control-Allow-Origin: * on the iceinspace
If the image on the server (internet) changes but has the same name and is not cached, then your image will change as well, when you load it by JavaScript.
But, if the image is cached, then it will not change (you will see the old image).
To see the latest image, as present on the server, you need to append a unique string in the URL, every time you make a request.
For example,
function showFlyout(event)
{
var d = new Date();
var n = d.getTime();
document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg?v="+n;
}
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.