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...
Related
I've created a micro page with absolutely no external references, even without any favicon.ico.
Instead I'm using base64 inline images.
The only CSS I'm using is inline of a <div> element.
The following code is not part of my source, so I don't know where it becomes generated.
Where and how does the following code come from?
What is it's meaning? What consequences does it have?
Fulltext for copy&paste:
<style type="text/css" style="display: none !important;">object:not([type]),object[classid$=":D27CDB6E-AE6D-11cf-96B8-444553540000"],object[classid$=":d27cdb6e-ae6d-11cf-96b8-444553540000"],object[codebase*="swflash.cab"],object[data*=".swf"],embed[type="application/x-shockwave-flash"],embed[src*=".swf"],object[type="application/x-shockwave-flash"],object[src*=".swf"],object[codetype="application/x-shockwave-flash"],iframe[type="application/x-shockwave-flash"],object[classid$=":166B1BCA-3F9C-11CF-8075-444553540000"],object[codebase*="sw.cab"],object[data*=".dcr"],embed[type="application/x-director"],embed[src*=".dcr"],object[type="application/x-director"],object[src*=".dcr"],object[classid$=":15B782AF-55D8-11D1-B477-006097098764"],object[codebase*="awswaxf.cab"],object[data*=".aam"],embed[type="application/x-authorware-map"],embed[src*=".aam"],object[type="application/x-authorware-map"],object[src*=".aam"],object[classid*="32C73088-76AE-40F7-AC40-81F62CB2C1DA"],object[type="application/ag-plugin"],object[type="application/x-silverlight"],object[type="application/x-silverlight-2"],object[source*=".xaml"],object[sourceelement*="xaml"],embed[type="application/ag-plugin"],embed[source*=".xaml"]{display: none !important;}</style>
I can think of two possibilities:
1) Added by a browser plugin or extension.
Try running in Incognito mode with all extensions disabled, and if it's due to a plugin or extension the additional content will go away.
2) Added by the web server that is serving the web page
To see if it's #2, load the HTML file in your browser using a local file:// URL and check if it's still there.
Most likely it's related to an Ad-Blocking type of browser plugin that is setting { display: none !important } CSS attribute for all Flash, Shockwave, Silverlight, etc. content on the page.
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
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
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.
I have an htm file with an iframe and a menu structure. The menu can load an htm file in the iframe or an aspx file. No problem at all.
But... Now they want the iframe to get the size of its content. (So there will be no scrollbar in the iframe, but you have to scroll the whole htm file.)
I didn't get this to work so I thought I would use a div for this issue. But I can't get the aspx file to load in a div.
So I'm stuck. Either I have to find a way to let my iframe grow or I have to find a way to load an aspx file in a div.
Placing the remote content directly in a div will be the easiest here, otherwise you will have to try and automatically size the iframe after the page loads, and it might even change height after that too.
To load HTML content from a remote source into a div you will need to look at the XML HTTP Objects exposed to the browser via javascript.
It sounds like you are not familiar with the concept so I would advise using a Javascript library like jQuery to help you along.