embedded javascript into an iframe - javascript

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.

Related

Trying to styling inside a 17Hats iFrame in Wordpress

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.

How to start script in HTML without <script> tag?

I'm using a low-code development platform called WaveMaker right now, and it gives you the option to customize the "markup" of the page (HTML, but you can't really edit <head>; the whole thing is kind of weird), the Javascript of the page, particularly with events like onpageload, etc., the style of the page (CSS), and the page's variables (JSON). I'm trying to embed Formstack forms, but every time the Markup section encounters a <script> tag, it deletes everything after the end of the tag. This is what the markup page looks like. I contacted support and they seemed to indicate that this was on purpose. Is there any way to make HTML run script included in-line without saying <script>? PS: I would be able to embed using iFrames, but for some reason the iFrames aren't working on the iPhone test program, even though they're working on the simulator.
What you can do is put it inside an HTML event attribute.
<body onload="/*your JS here*/">
</body>
If that does not work, try attaching onload to another HTML element or try one of the other event handlers (though I believe that they should have taken this into account as well)
How about this :
<body onload="javascript:(function(){
// you can place your code here it should run
alert('ok')
})()">
</body>
In Avatao's Senior Web Security Career Path, there is a hacking task, where you need to insert malicious javascript code - but the <script> is tag filtered (other tags aren't). Aenadon's answer gived me one solution:
<body onload="your JS here"> </body>
After submitting that, I checked the official solution, and I found that:
<img src="x" onerror=alert('xss')>

Why does Google Tag manager append at the end of the body?

I am currently trying to implement the Google Tag Manager but I run into a problem since the GTM appends the tags right before the closing tag of the body.
Whenever I have a template that needs to call a bit of code from one of the scripts in the Google Tag Manager I get an undefined error. This is obvious since it does not matter where I place my script in my view, GTM will always come after it since it appends right before the closing body tag.
Is there any way to fix this behaviour and why does Google do it like this? I understand that it helps with non-blocking but they might as well just place async attributes on the scripts and it will almost do the same?
An example I have Facebook Pixel as one of my tags in GTM and I need to be able to make a specific event call when I am loading a certain page as my view.
fbq('track', 'Search');
Ofcourse this needs a fbq instance to begin with. This leave me with only one option and that is to try and place my script in my footer which is a general template and it will get messy.
Any workaround for this behaviour?
The issue you are facing is that the Facebook library is not completely loaded when you are calling your function.
One method would be to migrate your Facebook code to GTM trigger it on all pages
and fire your specific code on dom ready
You could also use the code from below and see when the _fbq.loaded variable is set to true.
https://gist.github.com/chrisjhoughton/1dc91dd7bd95717e08d3
You would have to create trigger based on this javascript variable.
Hope this helps

How to create a javascript plugin like the Facebook live stream?

I am looking to create an easy java script plugin for my site that can be placed in other sites to pull info from my site. The Facebook live stream plugin allows you to select a couple options and it will spit out a line of code to place in your site to have the Facebook live stream. Can someone point me in the right direction or give me some info on how to do this? I know how to write the java script to pull from my site but I do not know how to make it so simple to integrate into another site. I really like that the Facebook plugin requires only one line of java script, this will make it easier for my customers to include in their site. Any help would be appreciated.
Thanks
Take a look at the code you have to post when using FB live streams:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>
<fb:live-stream event_app_id="APP_ID" width="400" height="500" xid=""
always_post_to_friends="false"></fb:live-stream>
So here's what I would think happens under the covers:
The script is fetched from the server
Onload the script code looks for the fb:live-stream element and looks at the attributes as parameters
The fb:live-stream element is removed from the DOM and converted to appropriate DIVs, etc.
The script registers some mechanism to periodically refresh the content in the DIVs
It's also possible that the fb-root element is used for the content. No idea. Would have to look # a DOM.
That's really all most of these widgets do. Usually you tell the user to get a script.js via a script tag and also define an element that they would like for the content to appear in. Once the script tag is loaded, register an onload handler, find your element, and do what you gotta do.
Just be careful to isolate any jQuery instances or globals you might depend on so you don't mess up anything on the page.

How to create a blog plugin?

Actually not sure on the terminology of what I'm trying to do. I have a dynamic page (php) that I want people to be able to 'plugin' to their blogs. A couple lines of code that when inserted, insert the php page into their blog, like Google has a few lines of code to add Adsense into a page.
This is what I have which I think is right but how do I get the html, do I just use a post? There must be a simpler way?
<div id='fill'></div>
<script type='text/javascript'>
??? Code to get html ????
$("div#fill").html(html);
</script>
EDIT:Tried to reexplain
You could just use a simple html iframe:
<iframe src="http://www.google.com" width="50%" height="300"></iframe>
More on iframes:
https://developer.mozilla.org/en/HTML/Element/iframe
If I understand you correctly now, you just want to load the contents from another site and embed them within your site.
PHP's file_get_contents will allow you to load whatever the other site's code is, and you could manipulate that with JavaScript/DOM, or use it in your .html() function (I won't go further now because I still don't know if that's what you really want).
Or you could just embed it within an iframe.

Categories