Our web page uses dynamically generated svg from an ashx page. This works in IE8 and earlier using the Adobe SVG plugin. It does not work in IE9 (including compatibility mode). We are using the <object> tag. I am trying to modify the page to work with IE9.
I was able to get SVG to render with a simple test svg I found on the web using:
<embed src="http://oursite.com/circle1.svg" type="image/svg+xml"
height="200" width="550"/>
However if I change this to:
<embed src="http://oursite.com/ourhandler.ashx?t=Circle&v=1&ext=.svg"
type="image/svg+xml" height="200" width="550"/>
I get a blank box with a disabled vertical scrollbar.
The output of "ourhandler.ashx?t=Circle&v=1&ext=.svg" is the same content as "circle1.svg" and browsing to http://oursite.com/Ourhandler.ashx?t=Circle&v=1&ext=.svg directly renders correctly in IE9.
What do I need to do to make dynamically generated svg work in IE9? I am not attached to the <embed> tag, but have not had any luck with other methods (such as the <object> tag).
Check if you allow HEAD requests for your handler. IE used to have two GET requests : one for the content-type and one for the object. Now the first request is HEAD, so if the verb is not allowed, the second request won't work.
works for me in all browsers:
http://jsfiddle.net/mihaifm/n8DWe/3/
Maybe it's an issue on how you're encapsulating the embed.
I have the same problem too.
I use Fiddler to trace the problem, then I found that the element didn't post a request to the URL specified by "scr" attribute.But it do request when the ext of "src" starts with ".svg".
Finally I found a solution.
Step 1
I change the src to something like (use ".svgx" ext)
<embed src="http://oursite.com/ourhandler.svgx?t=Circle&v=1"
type="image/svg+xml" height="200" width="550"/>
Step 2
Write a HttpModule to Rewrite the URL to your real URL.
In your case the real URL is http://oursite.com/ourhandler.ashx?t=Circle&v=1&Ext=.svg
Related
I have an iframe - the iframe works when the src points to a page on the same server, allowing me to embed pages.
The same iframe will not allow me to embed pages from another server. I have tried different src= pages and different browsers on Windows, OSX and Linux. I have tried hard-coding the src attribute and setting it programatically.
I haven't worked w html for years and know click-jacking has caused some hosts to disallow their content but am confident this is not the issue.
<iframe src='myPage.html' name='i' id='i'></iframe>
works as expected
<iframe src='http://theirServer/theirPage.html' name='i' id='i'>
</frame>
does not work as expected
Not all sites allow you to embed them via iframe (such as google). if using Chrome, check your console. If you have an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." then the site does not allow you to embed it.
Basically if the site uses the header X-Frame-Options, and has it set to SAMEORIGIN, there's nothing you can do.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
There are a set of open parameter specify how the viewer should open the pdf . However, with the Chrome and firefox browser's default viewer , it does not work
<object id = 'zoomPage' type='application/pdf' data= '1.pdf#view=fit'><p>The PDF can not display</p></object>
I have tried the fit which I would like the pdf fill the object. If there is no parameter support , are there any workaround ? I tried a lot of approach but none of them work. For example, I also tried using iframe instead of object. However, the content does not resize. Thanks
<iframe src="1.pdf" width=1300 height=3300></iframe>
Searching a solution for a problem very similar to yours, I found an interesting thread on forum.asp.net. http://forums.asp.net/t/1877403.aspx?Issue+with+embedded+pdf+object+in+chrome+browsers
At the end of the page, there is a workaround by a user working smoothly in Chrome. That seems to solve the problem.
Here it is an example:
<iframe src="/Downloads/MyPdfDocument.pdf#view=fitH" width="700" height="880"></iframe>
For users fighting with http://pdfobject.com/ -> "pdfobject.js" like me, you can change few lines of code on both minified and develop version of pdfobject.
Find:
c.innerHTML='<object data="'+a+'" type="application/pdf" width="'+i+'" height="'+z+'"></object>';return c.getElementsByTagName("object")[0];
and change with this line of code:
c.innerHTML='<iframe src="'+a+'" width="'+i+'" height="'+z+'"></iframe>';return c.getElementsByTagName("iframe")[0];
Hope this helps.
This post is quite old, but nowadays you can put #view=fit on the end of an iframe's src URL to make sure the PDF opens a page to fit within the iframe.
I am attempting to move legacy content into Umbraco v4.9.1. Some of the photos that are being migrated are being resized using an httphandler (ImageResizer.ashx) using variables passed through the query. When I attempt to save the path the url is replaced with either "/" or what the path originally was. Is there a work around? The tag is below.
<img src="/imageresizer.ashx?mw=232&src=/imagePath/image.jpg" />
The url is correct, because if I type it into a browser the image comes up fine. It seems like Umbraco is filtering out this url.
UPDATE:
I am noticing that the editor is chopping off everything before /imagePath/image.jpg and only displaying that. I have tried turning off the TidyEditorContent in the UmbracoSettings.config and it still does this.
A workaround would be to UrlEncode the src part of these Urls, where "/" is replaced by "%2F".
<img src="/imageresizer.ashx?mw=232&src=%2FimagePath%2Fimage.jpg" />
I don't know if you can do this is your particular situation, but it is a workaround.
I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).
I have read and experimented with suggestions from these articles and more:
http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html
I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
So then I have this in the body of the page:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box
profile_id="***my ID here***"
width="450"
height="600"
colorscheme="dark"
show_faces="false"
stream="true"
header="false"
logobar="0"
css="http://***my domain here***/css/FBstyles.css?1"
href="http://www.facebook.com/***my page name here***"
></fb:like-box>
But I still get these sorts of errors:
"(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."
Where am I screwing up?
I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.
You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.
EDIT:
In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.
My site supports exporting data in a few ways, and one way i via iframe.
<iframe src ="http://www.conanstats.com/Feeds/IFrame.aspx?Guild=30&EventCount=15" width="270" height="400">
<p>Your browser does not support iframes.</p>
</iframe>
Currently the problem is that when it's shown in a web site it's going to have its own style, is there any ways for it to inherit the style from the page it's being shown in. Or do I need to make url arguments to make this happen
An iframe is technically a different browser window with its own DOM and associated CSS imports. If you want to style the iframe's content put the CSS you would like to use in the file the src property is pointing to.
If it is pointing towards an ASP file change it in there.
You could have your page take a parameter which it then uses to decide which local style sheet to load...