i am using django and i have a method that generates a URL for a certain map on geojson.io
Now i am trying to implement this into my html code. When using a button that opens a new tab with the url everything works fine, but now i want to embed this onto my page instead of opening a new tab when clicking a button. So for this i read about "iframe". Now the problem is when passing my URL to src into "iframe" it doesnt display the map into the frame but rather opens the URL as if one would type the URL into the browser.
I tried it using an absolut path and using a variable, both had the same result as mentioned above.
Is this a problem with geojson.io or am i doing something wrong with my code?
The URL is encoded with encodeURIComponent doing it in django with the urllib package.
Here is my html code i implemented with the absolut path of the generated URL.
<iframe id="Example"
title="Example"
width="300"
height="200"
src="http://geojson.io/#data=data:application/json,%7B%22features%22%3A%20%5B%7B%22geometry%22%3A%20%7B%22coordinates%22%3A%20%5B8.6792%2C%2050.1171%5D%2C%20%22type%22%3A%20%22Point%22%7D%2C%20%22properties%22%3A%20%7B%7D%2C%20%22type%22%3A%20%22Feature%22%7D%2C%20%7B%22geometry%22%3A%20%7B%22coordinates%22%3A%20%5B11.5727%2C%2048.1404%5D%2C%20%22type%22%3A%20%22Point%22%7D%2C%20%22properties%22%3A%20%7B%7D%2C%20%22type%22%3A%20%22Feature%22%7D%2C%20%7B%22geometry%22%3A%20%7B%22coordinates%22%3A%20%5B%5B8.6792%2C%2050.1171%5D%2C%20%5B11.5727%2C%2048.1404%5D%5D%2C%20%22type%22%3A%20%22LineString%22%7D%2C%20%22properties%22%3A%20%7B%7D%2C%20%22type%22%3A%20%22Feature%22%7D%5D%2C%20%22type%22%3A%20%22FeatureCollection%22%7D">
</iframe>
So my question is, how do i embed a generated geojson.io URL with "iframe" (or others) and why is it linking to the site instead of displaying it in the frame?
Related
I am not able to reference a URL pointing to an image stored within Foundry within the code sandbox.
While the following works in the HTML widget, it does not work in the code sandbox:
<img src="https://<stack-name>.com/blobster/api/salt/<resource-id>"
alt="" width="200" height="200">
To use the tag within the code sandbox you will have to encode your image using base64. The resulting data URL can be decoded by the code sandbox and the image will be displayed. You can read more on data URLs and base64 here. To encode your image into base64 you can use any tool in the internet that lets you upload an image and returns a valid data url.
Example data url:
I am trying to do a simple thing , navigate to an external url
Class Books
However I am getting a 404 because the Http// portion is being deleted I am not sure if this is an mvc thing or html thing. Here is link http://18.217.228.108/angularapp1.
Here is a link to a screen shot of me accessing url
https://gyazo.com/455b01f1ceded24f9b4ce6c58b0e10e1
Curious-programmer,
You must navigate using an absolute URL just when it is out of your domain such as https://www.amazon.com/
However, I've noticed that you are trying to navegate to a link inside your own domain using absolute URL when you must use relative URL like:
Class Books
Try
Anchor Test
and then try keying http://18.217.228.108/angularapp1/book/ into your browser url.
The link you are using is actually 404.
Based on the link given in updated question:
The new link you've given is an html page (which you can navigate to in the "normal way"). It links to an angular app with an anchor "Books". Clicking on "Books", whilst attaching "book/" to the url in the browser (the url you're trying to link to in your original question), is intercepted by the script and actually navigates to:
http://13.59.126.130/BuellerWebApi_deploy/api/book/getAll
which returns a Json object containing data to display on the same page.
(Your concern about the removal of the http:// in the anchor is a red-herring (try navigating to http://www.bbc.com - you will see www.bbc.com in the browser url). It's the way your app has been configured.)
So, as things stand, navigating to the anchor in your original question, whilst appearing to be a valid url, actually is not. Its a 404.
I'm trying to get a live image from a camera using basic authentication in the url string.
To confirm that this works, writing something like the below into the browser works:
http://user:password#ipaddress/path-to-live-stream
But if I put the same url into the 's src attribute:
<img src="http://user:password#ipaddress/path-to-live-stream" />
This, however, does not work.
Even if this is by design or not, how can I make this work? How can I use basic url authentication to get a live stream or image from any source?
Is there any possible way (html, js, jquery) to change the base URL path of an iframe?
Here's what I'm trying to do: I have a webpage that has a URL-entry field and a display area. The web app takes whatever URL the user enters, and then uses a special proxy service to retrieve the webpage that the user has specified. I then render this webpage in the display area using an iframe, where I insert the html source code into the DOM of the iframe. I do not use the src attribute because I am trying to demonstrate the functionality of my proxy service, and I don't want the browser to directly render the page itself.
The html source that I insert will load in the iframe, with one caveat. None of the images or other resources that use a relative pathname work because they reference the URL of my outer webpage as the base URL. For example, if my webpage is located at www.me.com and the user tries to load www.google.com, I can render the html source for www.google.com, but the main Google image does not load because the image tries to load from www.me.com/image rather than www.google.com/image.
At the proxy end insert this tag:
<base href="http://pathtooriginalpage" />
and that should do it.
Part of my application are URLs that can be embedded in other sites much like a banner ad. Here is
an example.
That page is generated on-the-fly with the latest data to update the pie chart in it -- in other words just a normal JSF page. The links in it work and does what I want it to. This is OK for web page developers, since I can generate an iframe tag for them with the src attribute pointing to that URL.
What I would like to do is generate a URL and HTML code fragment that could be cut and pasted into other web pages and user forums so that the image is shown in the page, not just a link to it. Most user forum software will allow this but not allow inserts like iframe. For example the following doesn't work here:
<iframe src="http://www.myqwip.com/banner.xhtml?windowId=5b5&width=300&height=400&qwipID=2" width="300" height="300"> </iframe>
I think in order to do this I would have to provide a URL that serves a JPEG or PNG file on the fly, so the image could be displayed elsewhere. Most user-forum software allows such hot-links.
I have been looking for a way of doing this. Any suggestions?