I need to read in a string of HTML codes using ajax and refactor every file path found in the string.
For example:
I need to detect "../../images/home.jpg"
And change it to "http://www.mywebsite.com/report/images/home.jpg".
I am actually doing a dashboard. Using iframe to display content in a dashboard cost me performance. In order to not use iframe, I intend to read in the string of html codes of the targeted URL. But the only factor here is that if the filepath of any images, javascript or css are not absolute path, my dashboard will not be able to display.
Please give your thoughts in how you would detect file path within a string of html codes or is there any existing library that you know of.
Here is one of a simple html codes i am reading from.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Web Report: Customer Complains
</title><link rel="stylesheet" type="text/css" href="../../../css/Concept1.css" /></head>
<style type="text/css">
</style>
<body>
<div class="SectionTitleContainer1">
<div style="text-align: left;" class="SectionTitle">
Customer Complaints
</div>
</div>
<table cellspacing="0" cellpadding="5" style="width: 100%;" border="0">
<tr>
<td width="1%" align="left">
<a>
Refund
</a>
</td>
<td width="1%" style="text-align: right">139</td>
<td align="left" style="">
<img src="../../../images/tile-horiz-bar.png" style="height: 10px; width: 100px" />
</td>
</tr>
<tr>
<td width="1%" align="left">
<a>
Appointment Rescheduled/Delayed
</a>
</td>
<td width="1%" style="text-align: right">96</td>
<td align="left" style="">
<img src="../../../images/tile-horiz-bar.png" style="height: 10px; width: 69px" />
</td>
</tr>
</table>
</body>
</html>
After a long period of discovery, I learned that if there is a need for two different system to display identical UI, we should place the image files (or any other script files) in a common directory within a server. Web app should be given proper permission to access the files in the local directory of the server. The directory holding the image files should not be secured and not exposing to the public (if necessary).
Related
I am trying to set a background image in an HTML email which needs to viewed in programs such as webmail and gmail aswell.
I have read other tutorials and the general rule is it is not recommended, I used the background in the body tag and as a failover have the same background image used in table tag, as some programs strip away the body and head tage from the emails.
Is there a way to successfully carry a background over web based programs and on a phone such as samsung?
HTML
<body topmargin="10" leftmargin="0" bottomargin="20" background="images/background.jpg">
<!--first table contains failover background-->
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td background="images/background.jpg">
<center>
<table style="border: #FFF 4px solid;" width="600px" cellpadding="0" cellspacing="0">
<tr name="link-1">
<td align="center" valign="top">
<font style="font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;font-size:12px; color:#FFF;">CLICK HERE TO VIEW IN BROWSER</font>
</td>
</tr>
<!--THE REST OF THE MAIL THAT WORKS-->
</BODY>
</HTML>
If you have problem with using background-image in outlook, you should use VML
<v:image xmlns:v="urn:schemas-microsoft-com:vml"
style='width:500px;height:500px;position:absolute;top:0;left:0;z-index:-1;'
src="yourImageUrl" />
The best way to get it working for multiple devices is using the following website: https://backgrounds.cm which will help with Outlook.
Now-a-days this is less of an issue, but I would suggest you ensure your image is the full URL and publically available not based on your local machine.
body {}
.table{
background-color:aqua
}
this is my StyleSheet1.css saved in my local at C:\Users\ingyadav\Documents\Visual Studio 2015\Projects\StyleSheet1.css
<html>
<head>
<link rel="stylesheet" href="file:///C:/Users/ingyadav/Documents/Visual Studio 2015/Projects/StyleSheet1.css" type="text/css" />
</head>
<body>
<table class="table" border="1" style="width:300px;height:500px">
<tr style="width:auto">
<td style="width:150px;height:500px"></td>
<td>
<table border="1" style="width:150px;height:500px">
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
And this is my HTML string to be loaded into pdf now
when i pass this to the evo html to pdf converter,its not loading the external css into the pdf.
in evopdf support they mentioned to provide the fully qualified URL's but after using proper URL also its unable to load the external css.
can anyone help me on this please.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
More Example: https://www.w3.org/TR/html401/struct/links.html#h-12.3
I am creating a web site and need to copy certain HTML from one page to another (rather than re-write it. Take this table for example:
I copy (from Page1.aspx)...
<table class="InfoBox">
<tr>
<td class="InfoBoxTopHeader">Data</td>
</tr>
<tr>
<td class="InfoBoxContent"></td>
</tr>
</table>
Then I paste (into Page2.aspx) and get....
<table class="InfoBox">
<tr>
<td class="InfoBoxTopHeader">Data</td>
</tr>
<tr>
<td class="auto-style1"></td>
</tr>
</table>
It takes the CSS from my CSS file, inserts it in the top of the APSX file and names it auto-style1 in this case only for InfoBoxContent but it could be all sometimes. It is driving me nuts.
I am using Visual Studio 2012. Any ideas why this is happening?
Does page 2 have a header with a link tag pointing to that stylesheet? If css isn't being expressed it may because that specific page doesn't see it. If that's the case, you may need to added a tag pointing to that stylesheet.
Something like:
<LINK href="special.css" rel="stylesheet" type="text/css">
Or more like:
<!DOCTYPE>
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>
Using "frame" of html for showing the files but only show the PDFs and text file in "frame", doc and x ls files are downloaded instead of showing.
Following is the sample code:
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Open Word in Iframe</title>
</head>
<body>
<div align="center">
<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr>
<td width="25%" align="left" valign="top">
Doc 1
<br />
Doc 2
<br />
Doc 3
</td>
<td width="75%" align="center" valign="top">
<iframe name="awindow" frameborder="2" width="580" height="440" src="doc.txt"></iframe>
</td>
</tr>
</table>
</div>
</body>
</html>
You need to configure MIME types for your web server in order to avoid downloading of those file types, when the remote client requests them directly (i.e. not through your web scripts).
.doc and .xls file types are probably not configured by default, so they default to a MIME type which is simply downloaded instead of displayed in the browser. Btw, the standard browsers don't know by default how to display Microsoft-specific file types, so you might need an extension/plugin/flash object to display it properly.
To display Word/Excell/PDF etc. file without plugins, use the Google Drive Viewer.
Instead of <iframe src="https://your-url.com/file.doc"> use <iframe src="https://docs.google.com/viewer?url=https://your-url.com/file.doc"> and the files will load.
We came across a strange behavior while using html tag. Actually the issue was because of improper usage of the tag. As a result of that, the page was getting submitted 3 times in Mozilla Firefox and 2 times in IE7. Here is the issue.
<link rel="stylesheet" type="text/css" title="Style" href=''/css/image.css'>
This was the code that we were using in one of our J2EE application. When we inspected the request and response (using HTTP Watch), we found out that the page was requested 3 times from the server. We found out that the additional "quote" after href= is causing the problem. We were not able to find out the reason why this was causing multiple page submissions. Is it because, the additional quote makes the href empty and because of that browser tries to load the styleclass from the same URL that loaded the page?
Can someone please help to find out the reason why this is happening? Any help will be greatly appreciated.
this explanation came from this article on Yahoo Developer site. Section Avoid Empty Image src:
When an empty string is encountered as a URI, it is considered a relative URI and is resolved according to the algorithm defined in section 5.2. This specific example, an empty string, is listed in section 5.4.
Although it still not clear whether this behavior affect href or not (the article mainly concerned on empty src). But looks like it does:
Hopefully, browsers will not have this problem in the future. Unfortunately, there is no such clause for <script src=""> and <link href="">. Maybe there is still time to make that adjustment to ensure browsers don't accidentally implement this behavior.
note: I never encounter such behavior so it's just theoretical answer :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mainOutterTable">
<tbody>
<tr>
<td>
<table class="layoutColumn" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;" valign="top">
<table class="layoutRow" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="910">
<table class="layoutColumn" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;" valign="top">
<table class="layoutRow" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="294">
<table class="layoutColumn" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;" valign="top">
<a name="7_N1K8HIC0GOO780I2B1KASD3047"></a>
<div class="wpsPortletBody">
This is a sample textf 3.
<link rel="stylesheet" type="text/css" title="Style" href=''/>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I was able to reproduce the problem on a test page.
This is mentioned in Section 5.2 of http://www.apps.ietf.org/rfc/rfc3986.html#sec-5.2
If the Relative path is empty, then the target URI is the base path.
if (R.path == "") then
T.path = Base.path;