I have a page and within the page I have an Iframe. The directory is as follows:
Folder1
Folder2
IframeCSS
IframeCSS.Css
iframePage1.html
stuff.css
parentPage1.html
In the iframePage it is referencing the IframeCSS.Css by use of relative link so /IframeCss/IframeCSS.Css
Due to the nature of the application, I am unable to change the link of the iframe page via hard code (Modifying the physical iFrame Html Page)
The overall goal is to get iframePage1.html to see IframeCSS.Css (and all other hrefs/src's) through relative links (href="/IframeCSS/IframeCss.Css")
There are a couple of things I've tried:
Dynamically add a base path to the Iframe
This failed because the base can only be added AFTER the iframe loads thus making the links act as if base did not exists
Create a container Iframe to get the HTML, add the Base, and copy over the Contents over to the displayed Iframe
This failed because of the reason above, this method also causes issues with Google Map API's being loaded in as well
Go through the container iframe, using jquery, append the parent root to all src's and hrefs's to change the url
This also failed.
What would you guys suggest I do at this point?
(The iframe points to the same domain AND the user needs to be able to navigate through the iframe)
parent HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="cmsCSS/CmsStyle.css" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="CmsScript.js"></script>
<script src="Insights.js"></script>
</head>
<body id="Dash">
<form id="form1" runat="server">
<div id="topDash">
<img id="something" src="img/logo.png" />
</div>
</form>
<iframe id="dashBody"></iframe>
<iframe id="iframeContainer"></iframe>
</body>
</html>
using your same directory structure, this -
href="IframeCSS/IframeCss.css"
didn't work? Without the "/" keeps it in the same directory. Conversely, using "../" means back one directory. So if you're trying to move backwards, you can just keep adding "../" (ex: "../../../stuff.css").
referencing a page within the same domain is simply not possible because even without the iframe, the page would not work with the relative file path:
Folder1
Folder2
IframeCSS
IframeCSS.Css
iframePage1.html
stuff.css
parentPage1.html
If you accessed the page by typing in domain.com/Folder1/Folder2/IframePage1.html
the page will not work because IframePage1.html is trying to access the css with:
href="/IframeCSS/IframeCss.Css"
which means that it is looking for domain.com/IframeCSS/IframeCss.Css and based on the file structure I provided, It simply does not exist.
What I was attempting to do was to simply somehow change the Hrefs and src's of the entire iframePage to instead of looking for domain.com/IframeCSS/IframeCss.Css, it would correct the link and search it in domain.com/Folder1/Folder2/IframePage1.html instead.
The solution to this is to put the contents of Folder2 in the root directory, and create a new directory within the new root that contains the parentPage1.html. This way, file paths need not to be changed.
if you have access to the page that is being rendered inside of the iFrame, then all you have to do is add your link inside the <head> tags on that page for the CSS. you should not have to do anything through the calling page.
you can view the page that is being called all by itself. so do everything for it all by itself. JavaScript and all.
create that page first. then call it into the other page. iframePage1.html should be finished before you think about calling it into an iFrame in another page. you should not have to do anything to it through parentPage1.html.
iframePage1.html should have it's own <html> tags, it should be a self sustaining page that can be viewed in a browser with out an iframe.
I feel like I am going a little overboard. but I want to make sure that it is understood.
I can call google.com in an iframe on my page, and it will look the same as it does if I opened it in a browser all by itself.
Found the Answer you are looking for I think
check out this fiddle, the iframe on the right has clickable links that you can navigate inside of that iframe with.
I set the sandbox to allow only a certain number of things, I didn't know about this prior to this question.
JSFiddle
here is the page that I found that told me a little bit about the sandbox, sounds like something that I will read about later
maybe something you should take a look at.
Sandboxed iframes
I thought that you could move around in the iframes, but I was WRONG , but with Sandboxing you can do this!!!!
Related
I'd like to embed an HTML file into an MkDocs/Material page.
I'm trying something like what's below, but getting a 404 error.
Any idea of the right way to do this?
<div class="map">
<iframe src="map.html"></iframe>
</div>
For what it's worth, a link like this does work, but I'd like the option to embed it in the current page.
[Show a map](map.html)
404 error seems that map.html is located somewhere else, while [show a map](map.html) may generate correct link. map.html is relative to viewing page, so I recommend to:
get absolute url of map.html file, e.g. When you click on Show a map what is absolute URL in browser location bar?
put that absolute URL into iframe src="absolute url"
you may make the absolute url relative - based on address current address in location bar
Actually the index.md files behave differently. Relative paths work with them, but I also found a workaround for keeping it at relative paths: I went up one level to root then I used it as if it in the folder that gets generated in the site folder when you run mkdocs build See it in my sample docs here: https://agu3rra.github.io/volpy/ Link to the repo is on the top right corner.
Cheers!
Problem
I have three files in two locations: html2 in a parent folder, html1 and img.png in a subfolder. I embed folder/html1 in html2 using html <embed>-tags. folder/html1 contains img.png as a relative path. When I open html1 as a stand-alone file, the image is displayed correctly. However, the image is not shown in the embedded version because the path is now interpreted relative to html2 (the image is expected in the parent folder).
<html>
<head>
<!––html2-->
</head>
<body>
<embed src="folder/html1.html">
<head>
<!––html1-->
</head>
<body>
<img src="img.png"></img>
</body>
</embed>
</body>
</html>
Question
How to make my browser show the image without moving files or rewriting the html code? Is there any way to make html automatically "rewrite" relative paths when using embed?
Considered solutions
I considered moving all files to the same folder but I find that rather unelegant. Using absolute paths is difficult because html1 is generated automatically. There must be a better solution?
The point goes to Quentin. I tried the minimum example again and it works. The relative paths are resolved correctly by default. The reason why it did not work in my (unreferenced) original code was because both html files are created by a python code that copies both to a new location but not the image. Thus there was no image in the new location and nothing to display. My bad!
#Quentin: Thanks for your comment. Made me check again. How can I give you credit?
#Carl: Thanks for the hint! I didn't know about the base tag. Did not need it after all but maybe in the future!
So I'm having trouble with my HTML wherein I can display a picture from another site, but when I try to show a picture from my own computer the link is broken and I get a little blue box with a ? in it.
I have tried using the picture's relative path, absolute path, and putting the pic in the same folder as the html. Here is an example, where the pic is in the same folder as the HTML.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="bed.jpg" alt="bed" style="width:100px;height:38px"></body>
</html>
I have also tried this code with and without the style element. Nothing seems to be working.
If it makes any difference, I am doing this in web2py.
<img src="bed.jpg" alt="bed" style="width:100px;height:38px">
In the above, bed.jpg is a relative URL, so it will simply be added onto the URL of the current page. That will result in web2py returning either a 404 response or the HTML of the current page.
If "bed.jpg" is a static file, you should use web2py's mechanism for serving static files as described here (i.e., put the file in the application's /static folder, maybe in a subfolder for images, such as /static/images). It is also advisable to use the URL() helper to generate URLs to be served by web2py, so your HTML should look something like:
<img src="{{=URL('static', 'images/bed.jpg')}}" alt="bed" style="width:100px;height:38px">
I have a website made with cakephp. Most of the links in it, and asset paths, are absolute (start with "/").
We're having some problems with our hosting provider and some domains are messed up, including the one for this website. I've managed to access it through another domain, but now the website instead of being on the document root of the domain (as it was with its original domain), it inside a few folders (so something like mydomain.com/folder1/folder2/folder3/my_index.php).
Is there an easy way I can make all those links/paths that now start with "/" point to the folder that I want (for example mydomain.com/folder1/folder2/folder3/) instead of what happens now? (they point to mydomain.com)
Yes, you want the <base> HTML tag. Use it like such:
<head>
<base href="http://mydomain.com/folder1/folder2/folder3/">
</head>
You can also make all your links open in a new window by adding a target="_blank" attribute to the base tag.
MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
I have a really hard time searching for this, because I have no idea how to call it.
I'll try to describe the process I want, and see if any of you know such an editor.
I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line.
What I do, is copy the menu over to every place. If I change the menu, I need to do it all again.
I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.
I was wondering if there was a way to do this.
I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.
Thanks
Have a look at server side includes ... create a menu.shtml page and then include it like so :
<!--#include virtual="/menu.shtml" -->
Its supported by most web servers out of the box (including IIS, Apache and lighttpd)
Have you heard about MasterPage Concept
The below link will give you a quick start
Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!
You can do this with jquery
Assume you have page1.html page2.html etc.
You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- page content -->
<div id="contact"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact").load("info.txt");
;
});
</script>
Whatever you place in 'info.txt' will be put on the spot of were you put
You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload