I am looking for a way to dynamically set the window title for a flex application in Internet Explorer. The most best way to do this is to call javascript from actionscript to set the window title via an "ExternalInterface."
ExternalInterface.call("eval(window.document.title = 'New Title')");
ExternalInterface.call("alert", "Hello ExternalInterface");
This works fine in browsers other than IE, and it even works in IE when accessing the flex application's swf file through an html wrapper.
ttp://localhost:8080/ChangeTitle/ChangeTitle.html
However, I need to access the .swf directly from the browser..
ttp://localhost:8080/ChangeTitle/ChangeTitle.swf
This causes the External interface call to change the window title to not work, but the alert still shows.
So the question is... why don't I just use the html wrapper? ... The answer: because the project is set up specifically to avoid using the html wrapper.
This is related to a known IE bug - http://bugs.adobe.com/jira/browse/FP-240
If anyone could suggest a work-around for this issue it would be greatly appreciated.
Thanks
Don't use ExternalInterface for this; use the BrowserManager class. You can first initialize it with a title:
var browser:IBrowserManager = BrowserManager.getInstance();
browser.init("", "my title");
Later you can adjust the title later on:
browser.setTitle("my new title");
I have several applications that use this and work perfectly in IE (though I haven't tested IE6).
More info on this topic: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64e50-7ff4.html
Related
tl;dr Demo of Issue
I'm attempting to integrate Ace Editor in an iframe via React 16. I am using the react-ace component library, though this issue exists if I implement the editor natively as well.
Although everything mostly works when I wrap the editor in react-frame-component, I cannot select highlight text which makes the editor unusable. I suspect this may have to do with the fact that react-frame-component is implemented with Portals, but I'm not sure exactly what the issue is.
I've replicated the issue here. I don't think this problem exists if I loaded the component with a regular <iframe src /> from another domain.
react-frame-component keeps the code in the parent window, and adds elements into an iframe, which confuses mouse handling code in ace to add event listeners to a wrong document
adding var document = el.ownerDocument before
https://github.com/ajaxorg/ace/blob/v1.4.10/lib/ace/lib/event.js#L111 would help.
A coworker and I were having a discussion about what is and isn't possible within the browser.
Then a question came up that neither of us could answer with certainty.
Can you create a webpage such that when you navigate to it, it engages the client-side printer and attempts to print a document. For instance, whenever you visit my personal website, you'll be treated to a print out of a picture of me, smiling.
Now, this is a hideous idea. I'm aware. But the discussion intrigued me as to if it could be done, and how. My friend insisted that the best you could do was pop up the print dialog for the user, they would have to click print themselves.
Would it be possible to bypass this step? Or just some fancy script to move the mouse over the print button and click on it? Or use an activeX control to interface with a Printer API directly?
You have to prompt the user to print the current page, there's no way to bypass this step (possibly in activeX for IE). That said, there's two different ways you could prompt the user to print images of you smiling when the page is loaded.
Here's how to do it in JavaScript.
window.onload = function() {
var img = window.open("me-smiling.png");
img.print();
}
And here's how to do it in css/javascript/html (assuming your picture has the id 'me-smiling'):
CSS:
#media print {
* {
display:none;
}
img#me-smiling {
display:block;
}
}
Javascript:
window.onload = function() { window.print() }
The only solution to avoid print dialog that I found was creating a variable on Mozilla Firefox to set auto-print. Maybe is not the best solution if you need to use other browser, but in my case, I only need to print a report automatically and it works:
1- Open Firefox and type "about:config" in the address bar
2- Right click on any preference and select "New" > "Boolean"
3- Add a variable called "print.always_print_silent" with "true" value
4- Restart Firefox.
Hope help you!
AttendStar created a free add-on that suppresses the dialog box and removes all headers and footers for most versions of Firefox.
https://addons.mozilla.org/en-US/firefox/addon/attendprint/
With that feature on you can use $('img').jqprint(); and jqprint for jquery will only print that image automatically called from your web application.
As far as I know, there is no way to print a document directly, without some client intervention, like setting browser flags.
In our current project we need to print directly to the default printer, but at least with Chrome you can do it easily with additional startup arguments.
To print directly to the OS default printer you can use:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --kiosk-printing http://www.contoso.com
Another option, which may also be useful, is tos use the native print dialog instead of chromes print preview.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --disable-print-preview http://www.contoso.com
Note, that window.print() and/or Ctrl-P behave accordingly the mentioned settings.
I know, that this does not exactly answers the OPs question, but I think it somewhat related, and for web based enterprise applications this is a quite common use case. Maybe someone find it useful.
For Firefox I recommend Seamless Print Addon
You can't bypass the print dialog, as far as I know. That would be a pretty obvious security flaw if the browser allowed that. But you can bring up the print dialog with "window.print()".
I think at best you would need an ActiveX component using base windows API to obtain a device context for the default printer and try and print an embedded image using assumed values for the printer settings.
To print to the default printer automatically without seeing a print dialog prompt, I've shared some code in the following question that works in IE7, IE8 and IE9:
Bypass Printdialog in IE9
From lot of search from last few days,
I've found a best possible solution.
Till date Chrome do not support direct printing from javascript.
It has launched USB and serial API which might help.
But currently I'm using a JavaApplet solution which is open source.
https://github.com/qzind/qz-print - build
While I'm getting error in building it. I preferred a Prebuilt - QZ Print Plugin 1.9.3
desktop app, which works great.
Download it from here: https://qz.io/download/
Code Example:
/***************************************************************************
* Prototype function for printing an HTML screenshot of the existing page
* Usage: (identical to appendImage(), but uses html2canvas for png rendering)
* qz.setPaperSize("8.5in", "11.0in"); // US Letter
* qz.setAutoSize(true);
* qz.appendImage($("canvas")[0].toDataURL('image/png'));
***************************************************************************/
function printHTML5Page() {
$("#qz-status").html2canvas({
canvas: hidden_screenshot,
onrendered: function() {
if (notReady()) { return; }
// Optional, set up custom page size. These only work for PostScript printing.
// setPaperSize() must be called before setAutoSize(), setOrientation(), etc.
qz.setPaperSize("8.5in", "11.0in"); // US Letter
qz.setAutoSize(true);
qz.appendImage($("canvas")[0].toDataURL('image/png'));
//qz.setCopies(3);
qz.setCopies(parseInt(document.getElementById("copies").value));
// Automatically gets called when "qz.appendFile()" is finished.
window['qzDoneAppending'] = function() {
// Tell the applet to print.
qz.printPS();
// Remove reference to this function
window['qzDoneAppending'] = null;
};
}
});
}
Complete example can be found here:
https://gist.github.com/bkrajendra/c80de17b627e59287f7c
This is the best solution that I have found for firefox:
There is this awesome add-on Seamless Print.
It works like charm.
I am currently building a flex application and would like to allow deeplinking to produce nice URLS such as http://site.com/#/account/settings and so on.
I have looked at swfaddress 2.4 and swfobject 2.2 to embed the swf and provide the deeplinking. So far everything works in Firefox and Chrome. However, in Internet Explorer 9, the back button and history functionalilty does not work, which is rather frustrating.
Interestingly, the Flex sample file here http://www.asual.com/swfaddress/samples/flex/ works pefectly in IE9. Upon futher inspection, it seems that they are using the ac_OETags.js file to embed their swf. Going through the documentation as well as the index.html file generated by flex, it seems that they are now using the latest version of swfobject as the preferred way to embed swf files.
Having said that, swfobject haven't been updated for more than a year. I am also unsure as to whether the author intends to update it. On the other hand, I do not like the way adobe's history.js works for deeplinking. Urls such as http://site.com/#view=1 looks very ugly in my opinion.
In light of the above, what libraries do you recommend for embedding swf files and deeplinking in a flex 4.5 project?
Those 2 are the best out there and I recommend you use both. With that said, I would try to debug the javascript/flex to see why this isn't working in IE9 and fix the code on both open source projects so that other developers can benefit from it.
The reason this is happening is that Adobe never updated history.js after IE9 came out. There is code in there to handle some IE7 bugs which is being incorrectly triggered.
To fix your history.js insert the following code:
After line 22 insert:
ie9: false,
After line 72 (what was line 71):
else if (browser.version == 9)
{
browser.ie = false;
browser.ie9 = true;
}
That should fix it.
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework
I'm creating a hidden iframe specifically to be used for printing in IE6.
Here's a basic outline of the code with some HTML population cut out:
$('body').append('<iframe id="printIFrame"></iframe>');
$("iframe#printIFrame").attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
$("iframe#printIFrame").load(function()
{
document.getElementById("printIFrame").contentWindow.document.title = "My Title";
var iframe = document.getElementById("printIFrame");
iframe.contentWindow.focus();
iframe.contentWindow.print();
$("iframe#printIFrame").remove();
});
This is working quite well, except for the ugly "about:blank" that shows at the bottom left hand of each printed page. I guess since I'm making this iframe on the fly the source (as IE6 sees it) is about:blank. Is there any way to fake the src or change what gets printed there? I tried setting the src right before printing, but obviously that changes the iframe to a new page and prints that. Any ideas?
You can not get this done without changing the src ahead of time, like you described. This is IE we're talking about. It's the single browser least likely to support anything fancy it could get away with not supporting.
(Though, for the record, I haven't heard of being able to override print metadata in any other browser, either.)
I did find an ActiveX plugin which claims you can modify the header/footer of the printout on the fly.
http://www.meadroid.com/sx_intro.asp
Alternatively, it can be changed permanently by going to Page Setup from the File menu in IE6. However I'm trying to avoid an ActiveX plugin if possible; I'm wondering if there is an easy way to change the header or footer through javascript. Any other ideas?