Trying to styling inside a 17Hats iFrame in Wordpress - javascript

I've looked up all sorts guides and founds that it's technically possible with jQuery, so I download Header and Footer Scripts ( a plugin ) and managed to get a console.log working with jQuery.
The code I have so far is:
<script type="text/javascript">
jQuery(document).ready(function() {
console.log('Hi');
});
</script>
I want to make the border-radius of a button in the iFrame 0, and it's Id="lc_form_submit", so is it possible for me to do that?
I want to do more, but I'd probably be able to figure out the rest if I can get help with his part
Thanks!

Short answer:
It's no longer possible to manipulate an iframe who's content originates from outside your domain.**
Longer answer:
What you have is code to log Hi to the on your site's console - which also doesn't need the jQuery wrapper, you can just do <script type="text/javascript">console.log('Hi');</script> since console logging doesn't require jQuery.
Unfortunately, jQuery will not allow you to manipulate contents of an iframe that's not hosted on the same domain. It used to, but there were a ton of XSS issues opened up with malicious intent.
For instance, if you were to attempt to do this:
<iframe id="hats" src="https://17hats.com/iframe/"></iframe>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#hats').contents().find('body').html('<div>Hello World</div>');
});
</script>
You'll get the error Blocked a frame with origin "[your-website]" from accessing a cross-origin frame.
I'd look up some references on Cross Origin and XSS in general.
Essentially, if you're using iframed content you don't control, you can't do really anything about it.

If your iframe content is cross-domain, you cant't access its DOM.
Else this is how you would do it in plain Javascript and jQuery.

Related

How to use `arrive.js` to find an element arrived inside of a `iFrame'

I require to find the DOM element which is adding inside of a iframe, with the iframe added. for determine to find the element added, I am using this plugin
all i doing from chrome ext.
arrive.js
body>iframe1>iframe.ssueContentIframe2>#SmartReportTabContent1>loopElements>link
like this:
document.arrive(".ssueContentIframe", function() {
console.log('.ssueContentIframe arrived', this);//works
this.arrive('#SmartReportTabContent1', function(){
console.log('arrive 2');//not working
});
});
what is wrong here? any one help me please?
To check for an element within an iframe you need to include the arrive.js library and your script that calls the arrive() function within the iframe.
If you just want to detect whether iframe is loaded there's other solutions, but if you want to muck around in the iframe you have to keep in mind cross-domain policies.
Javascript has a Same-Origin policy in which javascript on the outer page cannot access the contentWindow or DOM (or global state) of the iframe page if it does not share the Same-Origin
-- T. Stone
Seems to me arrive.js isn't the problem, it's trying to mess with an iframe.

Load external page inside div and change it

I am trying to figure out how to load an external page inside a div and change it's HTML / CSS. Is it possible?
I got stuck with Same-origin policy, since it doesn't let edit html with a different origin.
For clarify, I want to highlight some content inside it's page and share it.
What are the restrictions to do that and possible ways to solve?
While this might be a really bad idea from a security standpoint, you could do an Ajax GET on the page you want to include and inject its content in the div using the html() jQuery function (strip the .. tags beforehand).
You will be able to tinker with the HTML, but you won't get the stylesheets this way.
Loading external pages inside your page seems like a bad idea to me, though, as it might expose you to XSS and other exploits if the remote page scripts are executed.
Another solution would be to use an iframe, however old-fashioned it may sound.

recognizing actions on an iframe

So I have an iframe, and I would like to be able to do something like an alert whenever a specific button in the iframe is clicked. But the following code does not work
$('.class_name').click(function(){
alert('Clicked');
});
in fact, it wont even alert when the iframe is clicked (which is the same code as above, but where .class_name becomes iframe).
I looked at the solution from this question, and it still did not work!
This is a jsfiddle that should demonstrate the issue pretty well.
So my question is: Why wont Jquery recognize when anything inside the iframe, as well as the actual iframe, is clicked?
Edit:
I understand that I cannot communicate with an iframe on a different domain, so my jsfiddle wont work...but it doesn't work on the site where I am hosting it on the same domain as the iframe...
If your iframe is coming from a different domain, as in your fiddle, then your JavaScript code has no access to its contents at all, sorry!
As #Max poins out, you can use postMessage() or the URL fragment hack to communicate with an iframe in a different domain, if there is code in that iframe to handle this communication from that side.
With an iframe from tumblr.com, you could check their documentation to see if it talks about using this page in an iframe and communicating with it across the domain barrier.
Now if you're talking about an iframe from the same domain as your page, then it's easy. Given an iframe element in a variable named myframe, you can use myframe.contentWindow to get its window object and myframe.contentWindow.document to get its document object. From there you can do the things you need. For example:
var $myframe = $('#myframe'),
myframe = $myframe[0],
myframewin = myframe.contentWindow,
myframedoc = myframewin.document;
$(myframedoc).find('a').on( 'click', function() {
alert( 'Clicked!' );
});
You may still have some trouble using a copy of jQuery in the main page to access things in the iframe, but should have better luck with the latest versions. Worst case you can use native DOM events and methods for this, but jQuery does work in this updated fiddle.
This fiddle uses document.write to put content in the iframe, but the jQuery code accessing the frame would be the same either way. The one thing to watch out for, of course, is whether the iframe has been completely loaded when you try to access it.
I think you can listen for a load event on the iframe element in the containing page, but worst case you could use setTimeout() or setInterval() and wait for the elements you're looking for to become available.
Because the iFrame is a completely different frame- it's done out of security concerns. For example, imagine if you could load a banks login page in an iFrame, and use js to get the field values.
With different domains especially, it is much harder to communicate with JS- this should get you started: How to communicate between iframe and the parent site?

Included JS in iframe has context of top frame window

$('<script/>', {
src: '/path/to/javascript.js',
type: 'text/javascript'
}).appendTo($('#iframe').contents().find('body'));
Correct me if I'm wrong, but I think that should load the JS into the iframe. I've also tried appending to head.
The problem
javascript.js is executed, but console.debug(this) in that script returns the top frame window. I've tried to verify that the script is actually included in the iframe, but don't really know how.
Additionally, running $('a') from javascript.js returns all links in the top frame, not every link in the iframe which I'd like.
Thanks for your time!
Update: I've put together an isolated test case which you also can download. Check the console and note that this is the top frame (can be verified by the variable _TOP).
This is kind of a grey area. For this specific action using jQuery, under the hood you're using importNode or adoptNode depending on the browser. However, IE won't support either (since I last researched it).
You might want to get a reference to the document, and write the script. If memory serves me right:
$('<iframe/>')[0].contentDocument.document.write('script');
I was able to make something in the same domain iframe update:
http://jsfiddle.net/maniator/DX6bg/1/
Make sure that the two URLs are in the same domain.
(including if there is a www in from or not)
UPDATE
You can test it like this:
$(function(){
var iframe = $('#iframe').contents();
$('body', iframe).append($('<div>', {text: 'this is a test'}));
});
now if you see the text this is a test in the iframe you know it is working

embedded javascript into an iframe

I'm trying to implement Google Calendar on my site into an iframe, I know Google has its own code for this, but the Calendar isn't editable then.
I have tried a few things, but I don't have the knowledge. Can anyone help me with this please?
<style>
input.createtable {
display:none;
}
</style>
<script language="JavaScript">
<!--
writeConsole = function(content) {
top.consoleRef=window.open('','myconsole2',
'width=800,height=800'
+',menubar=0'
+',toolbar=0'
+',status=0'
+',scrollbars=1'
+',resizable=1')
// top.consoleRef.document.open("text/html","replace");
top.consoleRef.document.writeln(
'<iframe <script src="http://www.gmodules.com/ig/ifr?
url=http://addthisshare.com/calendar3.xml&up_calendarSources=&
amp;up_calendarColors=&up_calWkst=2&up_calDefaultView=MONTH
&up_calHeight=375&up_calShowPrint=0&up_calShowCals=1
&up_calShowTabs=1& amp;up_calShowDate=1&up_calShowNav=1
&up_calNoActive=&up_calTimeZone=Europe%2FAmsterdam
&synd=open&w=805&h=390&title=Google+Calendar
&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F
&output=js"></script>"></iframe>'
)
top.consoleRef.document.close()
}
//-->
An iframe has a src-attribute that is the url to page you want to display inside of the iframe.
Code that you put between the <iframe>and </iframe> will not be seen, unless the browser does not support iframes.
So, you cannot expect both the above techniques to work at the same time. Either your src-url will be used or your code between the iframe-tags will be used; never both. This means that there is no way to "embed a javascript into an iframe". The only way to get your script in there would be to add it to the source page that you're loading into the iframe.
On a final note, I don't think you really know what you are asking for here. The title of your question is probably not what you want to do, but we'll need a little more information to solve your actual problem.
EDIT
I think I have a better grasp of what you're asking now. What you should do is to forget the iframe for a moment and just focus on getting the events to work. When you have that working, put it into a file of its own and reference that file via the src-attribute of the iframe. Nothing should be "put inside the iframe" by adding code in the iframe-tag itself.
The Same Origin Policy prevents third parties from writing scripts that can insert data into arbitrary websites.
If Google do not provide an API for this, then it cannot be done.

Categories