We Keep Coding

Get a parameter from URL and add it to iframe src

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

How to track bookmarklet usage using Image in Matomo?

I want to count users that use my bookmark in my Piwik/Matomo instance.
This is my code:
x = new Image();
x.src = 'https://piwik.jcubic.pl/matomo.php?idsite=7&rec=1&action_name=bookmark&urlref=' + location.href;
The problem is that when I open the statistic for today I don't see website with bookmark or reference on which the script was executed. I did this in incognito mode, so there was not cookie that disabled tracking for my browser.
The bookmark is REPL for Scheme language, so it's more likely be website that have Scheme learning resource or YouTube with video about Scheme. I think it's not the problem that I will track the url when bookmark was executed, there will be no information about the actual user so I think this is fine.

You can try to encode your href
const searchParams = new URLSearchParams({idsite: 7, rec: 1, action_name: 'bookmark', urlref: location.href});
const url = new URL('https://piwik.jcubic.pl/matomo.php')
url.search = searchParams.toString()
x.src = url.href;
Then you will have a URL like this with encoded special chars:
"https://piwik.jcubic.pl/matomo.php?urlref=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F63977752%2Fhow-to-track-bookmarklet-usage-using-image-in-matomo"

Is there a way to download an encoded file with window.open?

I'm using this code to download a file on click:
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, "\t"));
var dlAnchorElem = document.createElement('a');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "data.json");
document.body.appendChild(dlAnchorElem);
dlAnchorElem.click();
Due to some restrictions on the browsers I'm working with (inApp for android), this code does not work. So I'm thinking of a workaround..
I could use this code:
var url = "download.html";
var windowref = window.open(url, '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');
But since my content is dynamically generated (a dump of a json object), I can't pass it to download.html. Is there a way where window.open would take an encoded value in the URL parameter, so that when the new window opens, it would instantly download the file?

Opening url with schema appended in new window Javascript

I have the URL of an uploaded file like this,
"http://localhost/App/uploads/image1.png"
I need to append the string "pic.scheme://" at the beginning of this url and open in new window.
When I try to open this in new window, missing the : from "pic.scheme://" in the address bar.
What I need is:
"pic.scheme://http://localhost/App/uploads/image1.png"
What am getting is: "pic.scheme//http://localhost/App/uploads/image1.png"

Open a new window on response with pdf attachment

jqGrid('navButtonAdd',"#pager2",{caption:"Save All",title:"Save & Create Receipt",onClickButton:function () {
var s;
s = jQuery("#list2").jqGrid('getDataIDs');
alert("selected");
$.ajax({
type: 'POST',
url:'http://localhost:3000/order/receipt',
data: {ids: s},
});
}});
With above code, I'm able to submit data to server and the on server side it will generate a pdf as attachment, now I want to view the pdf on response via a new window/tab on browser.
Anyway to do it?
thanks,
lupind

If you return a URL to the just generated PDF then you can call window.open with that URL. But I wouldn't use an Ajax call if you want to open a new window to display the PDF anyway. In this case I would either:
Use Javascript's window.open passing
through the data in the URL to the
page that generates the PDF and let
it output to the browser's window
(but it might be too much data in the
URL)
Create a special form to hold
the data from your page and submit
that form. This special form would
have a target attribute set
(target="_blank") to open it in a new
window/tab.
For me, using two HTTP calls for one result (the generation and viewing of a PDF) is a waste.

You can use window.open() to open a new window with a specified URL. Be careful, though, only to do this when necessary.

Excerpt from this link.
Use an iframe with visibility:hidden, then change the iframe location to a downloadable file in javascript on the success callback.
var iFrame = document.getElementById('hiddenIFrame');
iFrame.src = theurlThatWillProduceTheFile;