The project I'm working on uses React and proxies a Go server, and images can be displayed with src="/relative/path/to/image", but if I try to open the same route in a new tab it obviously goes through React's routing and doesn't display the image.
What I would like to do is open a new tab with the image from the image route. This is what I most recently tried:
function openImage(image: string) {
const newWindow = window.open("", "_blank", "noreferrer");
if (newWindow) {
const imageElement = document.createElement("img");
imageElement.src = image;
newWindow.document.body.appendChild(imageElement);
}
}
Firstly, newWindow is null when I try to add children to the document. But if I use window.open() without arguments, it is not null, but still doesn't work. The result is a blank opened tab in either case.
How do I specify that the route I want to be opened should be from the server? Or if I can't do that, is there a way to properly add children to the document of the new window?
Thanks for the help.
The issue with opening static resources in a new tab, when you're using React with the proxy property set in development, is that the new window will not use that proxy value the way the React app does. Instead the browser will just add the relative URL on top of the React server's origin address.
jsejcksn was right that this shouldn't be an issue in production, because any proxying in production should work when requests are sent to the site's origin.
Basically the proxying happens at a different stage because the proxy server should cover several services, opposed to the React development server which only covers the React app.
So in order to open those resources from the API in a new window, in development, you can't use a relative path, and must include the server's origin.
Related
I have been hired for a project.
This project is a react app wrapped in an electron.
The electron browser windows setting is set to alwaysOnTop.
I need to be able to toggle this on run, from the react code.
I tried to get the app or window by importing from the electron lib. as shown here, and descripted here
import { app, BrowserWindow } from 'electron'
The browserwindow doesn’t exist when doing this, and breaks the app.
The app is there. but I can't figure out where to go from there, since it contains a lot. but doesn’t look like there is anything relation to the browser window. (Inspect it by logging the app out when running the app)
If anyone out there know anything about how to get this working, I would be a happy panda.
Anyway, Thanks for your time
----- UPDATE BY REQUEST ----
I am trying to get access to the window that the application is running in so I can change the alwaysOnTop properties for the main application, by something like an event, fired in the application.
If I Import the BrowserWindow, the system will run. but whenever I try to read anything from this. this system breaks. I know that BrowserWindow is not an object. But I can't seem to see if BrowserWindow should contain a way to get the current open window.
I'm not trying to read the BrowserWindow before it is created. since I am trying to read it for the main window. and not a new BrowserWindow.
The Electron app have json setting. In this there is browserWindow setting, with the alwaysOnTop value. as shown below. If I change it to false, the main App is not running as always on top. But from default I want it to run as always on top. and the from an event like a button click, in the react part of the system. set it to false.
{
"browserWindow": {
"alwaysOnTop": true,
}
}
Hope this helps explain my problem. if not. let me know.
thanks for your time
I have created a PWA(Progressive Web App) using Angular6. It works perfectly as expected in the browser. My scenario is to handle all the app data based on the params I get from URL
eg: https://<my-site.com>/app/abc123
where abc123 is my param which I need to add to the home screen app.
So the problem is when user adds the app to the home screen it loses all the params (I have tried using queryparams as well) and that leaves me only with the hostname. I need the whole URL to be added as the App URL. Can you please help.
Thank you for your time and help!
When you add a web app to your homescreen, the browser will check to see if there's a web app manifest.
If the manifest is present, the start_url field in the manifest will be used as the initial page when you open the web app.
If you need to customize the initial page, you'll need to change that start_url value in your web app manifest accordingly.
So far, I have it so that when a user presses a button, a browser opens and redirects the user to my desired url. However, I want this to happen within the app instead of a web tab. How can I do this?
Use the BrowserComponent, just add it to the center of a border layout form and set the URL for that component. Check out the list of main components in Codename One within the developer guide.
Define a xml layout containing a widget called webview. Then in your activity you implement a listener to your button which invokes that xml with the desired page to load inside your webview. Google to find some code and return here with your code problems, if you find some. If this will be the case, open new questions provinding detailed info about your matters then we can help more. Best.
EDIT: Excuse me, just now, re-reading your question I think I really understand it, and the solution is very simple, just a line of code (to instruct your app to open a webpage inside your webview, and not the regular browser, outside your app). Try this:
wv = (WebView) findViewById(R.id.myWebView);
wv.setWebViewClient(new WebViewClient()); // needed to open url inside our webview, otherwise it will open at the default browser
wv.loadUrl(url);
I am using System.Windows.Forms.WebBrowser to display the webpages in a Windows Forms application. The Url i'm trying to display is the IPython Notebook which is,
http://localhost:8888/tree
and i'm able to achieve this using the below code,
this.webBrowser.Navigate("http://localhost:8888/", false)
Now in this page when I click on the New->Python2 to create a new notebook, it generates a new url which is like,
http://localhost:8888/notebooks/Untitled.ipynb?kernel_name=python2
My requirement is to get this new Url in the WindowsForms application. I've tried the events Navigating, Navigated and I get the new url as,
http://localhost:8888/tree#
And I'm not able to get the right url. Any Suggestions on this? Thanks.
I've managed to overcome this problem by editing the Javascript files in the IPython package. You can find the javascript file at the Ipython installed path,
IPython\html\static\tree\js\newnotebook.js
In newnotebook.js edit this line of code
var w = window.open(undefined, IPython._target);
and add '_self' in order to open the new url in the same window.
var w = window.open('', "_self");
Now I am able to get the url of the page using WebBrowser.Navigated and Navigating methods.
I'm creating a deployable module where some parts are written in Silverlight, and I'm making the SL application deployable for OOB usage. However, I want to make Silverlight take the name of the website that it's deployed from, such as, when a user installs it from Example.com, I want to have "example.com application" with the site's own icon in the shortcut. Is there any "supported" method of doing this, or will I be going with locating the XAP file and manually changing AppManifest.xaml inside it?
You will need to find out your URL of your application:
string appURL = Application.Current.Host.Source.AbsoluteUri.Substring(0, Application.Current.Host.Source.AbsoluteUri.IndexOf(#"ClientBin/"));
So this will solve the title problem, next is the icon. You could load the image from the page:
Uri uri = new Uri(String.Format("{0}/favicon.png", appURL));
IconImage.Source = new BitmapImage(uri);
It's not perfect, you will have to manipulate appURL to get the domain name only.