Is it possible to only reload/refresh an iFrame inside a website that contains many iframe?
iMacros Free (Firefox)
It seems to be possible at least in 'iMacros for Firefox' v.8.9.7 or lower:
' you have to specify the following number '
SET numberOfFrameToReload 3
URL GOTO=javascript:{window.frames[{{numberOfFrameToReload}}].location.reload();}
Related
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.
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.
I want to apply css to google calender iframe. I had tried with Jquery but it gives JavaScript security error. However I also tried this link
Got success but many of its links goes to 404 page as it takes my domain as base URL
You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:
document.domain = "example.com";
the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –
You cannot apply css to a iFrame ...
An iframe is a 'hole' in your page that displays another web page
inside of it. The contents of the iframe is not in any shape or form
part of your parent page.
From here
The reason behind that is security. If you have blabla.com in one
window and gmail.com in another one, then you’d not want a script from
blabla.com to access or modify your mail or run actions in context of
gmail on your behalf.
From here
If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Solution posted here
Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.
I am customizing my tumblr template and I need to access the URL of the iframe that contains my photoset. When I look at the html of my tumbler page, I see:
<figure class="photoset with-caption">
<div id="photoset_66130132457" class="html_photoset">
<iframe id="photoset_iframe_66130132457" class="photoset" style="border:0px; background-color:transparent; overflow:hidden;" src="http://blog.kazoova.com/post/66130132457/photoset_iframe/kazoova/tumblr_mvtbtjxyAt1t05bsz/0/false" frameborder="0" height="535" scrolling="no" width="100%">
</iframe>
</div>
</figure>
How do I get the value of src in the iframe using tumblr variables?
I can get the URLs of individual images using the following code, but this is not what I am looking for:
{block:Photoset}
{block:Photos}
{PhotoURL-500}
{/block:Photos}
{/block:Photoset}
I am hoping there is a variable for photoset that is similar to {PhotoURL-500} like {PhotosetURL-500}.
Please help!
How to get a Photosets iframe src
Sadly, there isn't a theme operator that gives us the src as a string, the only option we have is to use {Photoset-500} as OP states. However, it is possible to work the iframe src out with the theme operators we have.
Breakdown of the iframe src
http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/mikedidthis-pierre/tumblr_meih4y5SDi1rkq61e/700/false
We can break this down into 7 parts:
http://mikedidthis-pierre.tumblr.com/post/
37187983482/
photoset_iframe/
mikedidthis-pierre/
tumblr_meih4y5SDi1rkq61e/
700/
/false
1 The URL of the Tumblr blog, prefixed with post/. 1 and 2 should be used in tandum.
2 Unique Post ID.
3 A generic, consistant sub directory.
4 At first glance looks like the Tumblr username. I wouldn't say its the Tumblr URL due to custom domains. However, it seems like it can be changed to anything, as long at it contains a character.
5 A unique Tumblr generated ID. Think reblog keys. This is the part we really need and there are no theme operators to generate this.
6 The size, in width of the iframe.
7 Shadow mode. I believe turning this to true adds drop shadows to each of the photos in a photoset.
How much of this can we replicate?
So using the available theme operators like so:
{BlogURL}/post/{PostID}/photoset_iframe/x/ * missing 5 * /700/false
We can almost generate the full src!
http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/x/ * missing 5 * /700/false
Finding 5
The bad news is, we are going to need javascript. I am not going to cover that, but I will explain how we can get the missing information. If you use the theme operators for a photoset, that just give use the image urls `{PhotoURL-500}:
http://25.media.tumblr.com/tumblr_meih4y5SDi1rkq61eo4_500.jpg
Can you see 5? Lets break it down:
http://25.media.tumblr.com/
tumblr_meih4y5SDi1rkq61e
o4
_500
.jpg
1 Address for the Tumblr server the image is hosted on.
2 The missing data 5.
3 This is the number of the image in the photoset, so 4th. However, I think this relates to upload order, rather than display order.
4 Size of the image.
5 File extension.
So now what?
So to get the complete iframe src, you are going to need to use javscript to find the data for part 5 and then combining that with the data we already have from the available theme operators.
OP hasn't stated why they need the iframe URL. I would presume for delaying the loading, maybe to do with responsive.
Hope it helps!
Proof of concept:
Image based Photoset: Example.
Iframe based Photoset using information from above: Example.
I had a similar issue - I wanted to link the photoset "captions" (headers the way we have it set up) so that all of the post headers were links and worked/looked the same.
I found #mikedidthis's answer helpful. But I played around with it a bit and I thought reconstruction the iframe src from scratch was overkill.
I went about it updating my markup with a few more classes and using the following Javascript -
$('.top.media.photoset.no-link').each(function(){
$set = $(this);
var url = $set.find('iframe').attr('src');
// console.log(url);
$set.find('.cont').find('a').attr('href',url).end().end().removeClass('no-link');
});
Since I have lazy loading on, I wanted a way to only set the href once per link, I added in the class no-link to use for selector specificity (I could have also searched for links where href != "#" as well I suppose).
I just installed this and it seems to work like a charm except for one thing. When the page displays, the thumbnail is blank. Is there a way I can use the first video frame as the thumbnail display or something like that?
Thanks in advance for any help you can give me.
To have mediaelement.js load a thumbnail you need to ensure that preload is not set to none. For example:
<video src="myvideo.mp4" controls="controls" preload="metadata"></video>
Setting poster="poster.jpg" as per the example in the documentation won't necessarily work (unless you happen to have a file named poster.jpg). Though you can set the poster attribute to the location of an image to use as a thumbnail prior to loading the video, in the event you don't want the user agent to peek inside the media object.
See this answer for more information on the pre-load options - What are the options for the mediaelement player's "preload" setting?
I believe you need to put a poster="poster.jpg" attribute in the <video> tag.