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.
Related
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
This feels like a very stupid question, but I've been trying and searching for hours and can't figure out the problem. I'm new to pretty much all web development, and this was a test to figure out how to access form data on a new page. It just will not work for me. I have contactus.html and contactusaction.asp saved in the same folder on my desktop. Clicking submit loads contactusaction.asp, but "fname" will not appear on the next page no matter what I try. I've even copy and pasted other people's request.form examples, and I still have yet to get the comand to work in any way.
contactus.html:
<html>
<head>
Hello
</head>
<body>
<form method="post" action="contactusaction.asp"/>
<input type="text" name="fname"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
contactusaction.asp:
<html>
<head>Hello:</head>
<body>
<%
Dim x
x=Request.Form("fname")
Response.Write(x)
%>
</body>
</html>
Silly question, but after reading "saved in the same folder on my desktop" I have to ask - are you testing this using IIS or some other web server software on your desktop?
If you're just opening the local HTML page directly (double-clicking on the file vs running a local IIS and going to http://localhost/ or however you have it set up), there's no server running the actual ASP/VBScript code.
Also, reguardless of the answer to the above question, you should definitely fix the <form> tag as Guido Gautier mentions in his comment to your question.
This:
<form method="post" action="contactusaction.asp"/>
Should be this:
<form method="post" action="contactusaction.asp">
This is the script for a webpage with a GO TO MOBILE SITE button. When the button is clicked I want it to go to the mobile site.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function goMobile() {
window.open("mobile.dudamobile.com/site/syedasadiq");
}
</script>
</head>
<body>
<input type="submit" value="Go to mobile site" onclick="goMobile()" />
</body>
</html>
I'm certain that I've done everything correctly, but when I click the button on my browser it prodoces an error message saying: "Cannot find ...:/Users/AbdurRasheed/Desktop/mobile.dudamobil... Make sure path or Internet address is correct."
I think that the computer is registering my mobile URL as a file and not a website address, but I do not know for sure. Either way, how do I fix this problem?
Thanks in advance.
Use window.location.href = "http://mobile.dudamobile.com/site/syedasadiq".
Hi I have a menu in aspx page which works finely. So, I create a asp page called classicmenu.asp which consists of this
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#menu').load('Menuin.aspx');
});
</script>
</head>
<body>
<div id="menu" >
<label runat="server">afggh</label>
</div>
<label runat="server">asd</label>
</body>
</html>
Even here it works fine. I can see the menu . So, once include this in another asp page, I just get the labels defined in classicmenu.asp but not the menu i define in aspx page. So, can u guys help me out?
Where in the folder structure is the page that includes classicmenu.asp? If it's not in the same directory as Menuin.aspx, then the JS won't know where to find it when trying to load().
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.