I'm using a servlet to show images on page. The links looks like
http://webappname.com/getImage?p=imagename.jpg
But the resulting image in the browser tab shows
getImage (100x200)
I would like to output there more useful information like string, so how can I do it?
As the response is an image, it cannot contain additional information (such as the page title) as an HTML response could. One possible workaround to this would be to return a simple HMTL page with your image in it.
You could trigger then trigger the regular download (the existing behaviour) with an additional URL parameter. So for example:
http://webappname.com/getImage?p=imagename.jpg
Would return this HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="img-dl-style.css">
<script type="application/javascript">
// JavaScript to trigger image download when #dlButton is clicked
</script>
<title>Full Image Name</title>
</head>
<body>
<div class="container">
<h1>Full Image Name</h1>
<img src="http://webappname.com/getImage?p=imagename.jpg&dl=1>
<button id="dlButton" type="button">Download this image</button>
</div>
</body>
</html>
Any direct access to this URL:
http://webappname.com/getImage?p=imagename.jpg&dl=1
Would return the image directly, complete with the default browser title.
To see this in action, take a look at Dropbox's shared file viewer. A link such as:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx
Returns a full webpage with a preview of the shared file and a download button. Clicking the button triggers the download with this URL:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx?dl=1
Related
My Firefox add-on opens Fancybox (type: "iframe") from a content script (page-mod). In the Fancybox I show my own HTML page (my_fancybox_stuff.html) that is located in my own server.
Now, from the my_fancybox_stuff.js (javascript of my_fancybox_stuff.html), can I send a message to the add-on's main.js? Or to the content script that opened the Fancybox?
I was hoping the global 'self' object to be accessible from my_fancybox_stuff.js as it is accessible from the content script that opened the Fancybox.
I am interested to hear about any potential workarounds to get this done.
In Chrome extension this is trivial. In my_fancybox_stuff.js I can call chrome.extension.sendMessage() and it works.
Thanks in advance!
EDIT: Adding some code to clarify my case. Simplified the code to save folks' time on reading it. This is simple as hello world.
From the contents_scipt.js (injected with page-mod) I call:
$.fancybox.open(
{
// Some irrelevant Fancybox options hidden for clarity
href:"http://www.mysite.com/my_fancybox_stuff.html
type: 'iframe'
}
);
my_fancybox_stuff.html would look something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script src="js/my_fancybox_stuff.js"></script>
</head>
<body>
<div id="my-wrapper">
<div id="my-form-div">
<form id="my-form" action="#">
<div>
<div><p>Name</p></div>
<div><input id="fullname" type="text" name="fullname" value=""></div>
</div>
<div>
<div><p><a id="my-button" href="#">Press this</a></p></div>
</div>
</form>
</div>
</div>
</body>
In my_fancybox_stuff.js, when button ("my_button") is pressed, I want to send out a message containing the value of the input field ("fullname") and listen it in content_script.js.
Yes, your my_fancybox_stuff.js can communicate with your add-on's content script using postMessage ().
See the documentation and examples at MDN.
I have asp.net mvc application, that uses razor view engine.
I want to send head to browser, before body renders, to start parallel loading css, js and images, linked in css. (You can see, how this technique works on SO in chrome developer tools - network for example)
I found question about it in asp.net web forms: Send head before body to load CSS and JS asap
I tried to use this solution, but it don't work.
For razor engine next sequense of steps is actual:
action returns view result
_ViewStart.cshtml executes (set ViewBag.Layout)
view executes from first line to last (with code inclusions and sections)
view engine checks ViewBag.Layout and if it found - executes Layout (with renderind body and sections)
I think that good solution is to divide step 3 into 3 parts:
generating content for Head and Css section
send to browser
generating other part of view
Other solution is to static include all.css and basic .js files in (without sections content, generated from view), send head, and then generate view (with generation FooterScript section).
In both ways I need to start execution from Layout page, not from view. For first: Layout (head) - view (sections) - layout (flush) - view (other) - layout (body). For second: Layout (head + flush) - view (all) + Layout (body).
My _Layout.cshtml file:
<html #Html.Raw(ViewBag.xmlns)>
<head>
<title>#ViewBag.Title</title>
#Html.Partial("_MetaTags")
<link href="#Url.ThemeCss("jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Css("masterPage.css")" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico"/>
#RenderSection("Css", required: false)
<script src="#Url.CommonScript("jquery.common.min.js")" type="text/javascript"></script>
<script src="#Url.Script("Master.js")" type="text/javascript"></script>
#RenderSection("Head", required: false)
</head>
<body>
<div id="pageWhithoutFooter">
<div id="main">
#RenderBody()
</div>
</div>
#RenderSection("FooterScript", required: false)
</body>
</html>
Howto?
Try putting your head section into a Partial view then call this in your controller:
PartialView("_PageHeader").ExecuteResult(ControllerContext);
Response.Flush();
// Generate model
return View(model);
Not tested this but I can't see why it wouldn't work.
I have an aspx page which shows preview of html-email. The html email comes from DB as text. This is assigned to a div.
Now i have a base tag which carries a url which is dynamic based on the DB server name.
When i assign the html from DB to the div, the base for the relative url of the images inside the html are taking the base url of the page instead of the base url from the html text.
basically,
the page is rendered as,
<html>
....
<div> <html>
<head>
<base href="dynamic url" />
</head>
<body>
<img src="images/header.jpg" />
.....
</body>
</html>
</div>
.....
</html>
The 2nd html comes from DB.
How to force the dynamic url of the img tag to take the base url from base tag.
Now the img src is coming as, page_url/images/header.jpg. I want it as dynamic_url/images/header.jpg.
I think you should be able to do this in two different methods. First replace the text "images/" to your dynamic URL on the server side before you assign the email HTML to the container. It should be straight forward whatever language you are using.
If that is not possible then you can do that on client side with JQuery. The code below loops through all the img tags on the page and replaces to a path you specify. This does not actually change the source code but it renders the images with the new path.
$(document).ready(function(){
$("img").each(function(i) {
$(this).attr('src', $(this).attr('src').replace('old_path', 'new_Path'));
});
});
i want to access a javascript function which resides in a script file from another page with iframe.
my sample code :
Page from which javascript need to be accessed.
<iframe id="FRAMESET" src="default.htm" width="0%" height="0%">
<p>
Your browser does not support iframes.
</p>
</iframe>
default.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="Scripts/main.js" type="text/javascript" />
</head>
<body>
</body>
</html>
main.js
function helloWorld() {
alert("hello World");
}
i want to access this function on main page. i tried document.getElementById('FRAMESET').contentWindow.helloWorld(); but gave me error "that document.getElementById('FRAMESET').contentWindow.helloWorld();" is not a function.
It's possible. You can do this in the page that contains the frame:
document.getElementById('FRAMESET').contentWindow.helloWorld();
It's impossible. All browsers (IE, FF, Chrome) now prevent js accessing to iframe content. Why don't you just load main.js into the main page?
The Background
I run an ASP.NET site using Graffiti CMS for a local charitable/service organization.
The leaders of the organization want to start integrating a third-party back-end management system that exposes content as full HTML pages.
One of the pages, the officer list, uses inline script to load pictures or placeholders (depending on whether or not there is a picture for the given officer).
I've created a server-side proxy that enables loading the content from these pages using jQuery's .load() AJAX function.
I can display this content fine using an iframe, but that feels really kludgy, and if the size of the content changes, I may need to alter the size of the iframe to ensure it all displays (blech!).
The Problem
If I create a <div> in a Graffiti post, and use $("#divid").load(url) to load the content, the HTML content loads fine, but the inline script is stripped out, so neither the officer images nor the placeholders are displayed.
The Question
Understanding that the reason for the problem is that jQuery is almost certainly trying to protect against potentially bad stuff by removing the inline script before I load it into my DOM, is there a way using jQuery to grab this HTML and load it into my DOM that will preserve the script, but not open major security holes? I do trust the system from which I'm loading the content, if that makes a difference.
Suggestions? I'm looking to keep this as simple as possible...anything too complex, and I'm just as well off to stick with the iframe.
Thanks in advance!
#devhammer
There is an issue when you use document.write. If you have the ability to modify the source pages you can modify them to use the innerHtml technique instead.
To do so you would change something like this:
<div id="testDiv">
<script type="text/javascript">
document.write("<img src='image1.jpg' alt='' />");
</script>
</div>
To this:
<div id="testDiv">
<div>
<script type="text/javascript">
document.getElementByid('testDiv').innerHTML = "<img src='image1.jpg' alt='' />";
</script>
Doesn't work for me...
<!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>
<title></title>
</head>
<body>
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var dynamic = 'begin <script type="text/javascript">alert("hello");<\/script> end';
$('#test').html(dynamic);
});
</script>
<div id="test"></div>
</body>
</html>
The alert box is showing.. but if you replace it with a document.write, nothing in the document.write appears... you have "begin end"
Hope this helps!
Try setting the HTML manually, like this:
$.get(url, function(htmlText) { $('#divid').html(htmlText); });
I'm pretty sure this will execute the scripts.