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.
Related
I want to make a html page that act kind like google cache.
Say in my homepage HOME, I have a link A to a website B, and when I click on A, the page that comes out will display the content of another page, with a floating bar on top that has some functions of my own choices.
For example, I want my link to show google.com, but I also want to add a button(floating bar, anything) to that google.com that allows me to return to my own webpage when pressed.
Can someone provide me some useful resources for me too look at, or even better a solution template? :)
Thanks!
You could use an <iframe> in order to display an external webpage within your webpage.
Just place the url of the webpage that you want to display inside the quotes of the src attribute.
<iframe src="http://www.webpage.com" width="400" height="400"></iframe>
An iframe sounds like it may be what you need, but I'm not 100% sure after reading your description. The iframe will show content from another URL in your page. Once you have that all you need to do is style the page and use CSS/JavaScript to add in your functionality as described.
Check out this:
http://www.w3schools.com/tags/tag_iframe.asp
Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).
Here's the general idea:
HTML:
Click Here
<iframe id="frame" src="http://www.w3schools.com" scrolling="yes"></iframe>
Some jQuery (not tested):
$(document).ready(function() {
$('#frame').hide();
$('#link').click(function () {
$('#frame').show();
})
})
Style it as necessary
Note - this answer in no way endorses w3schools.com :-) . Please see w3fools.com/
I found Kevin Gourney's answer to be most straight forward and helpful. I'm using this to work around Adobe Spark's Domain limitation and created a simple one liner index.html file and tweaked the code as follows:
<iframe src="PasteAdobeSparkPageLinkHere" width=100% height=100%></iframe>
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')>
this is probably a very basic question, but my googling resulted in irrelevant results.
I want to be able to provide a 2 lines widget for clients, for example, for every video at Youtube you can get the "embed" line for it, you copy paste it to your web page and as a result you have the video on your page, example:
<iframe width="420" height="315" src="https://www.youtube.com/embed/_6mkqolyvVE" frameborder="0" allowfullscreen</iframe>
another example is the google's + "+1" button :
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
My general question is what is going on behind the scenes when a client has these lines in his page?
My specific question is, if I want to provide a 2 lined widget (a
<script>
line and a
<div>
line) how do I pass my javascript file to the web client in a way that the browser will know to treat it as a file it should evaluate and execute?
Thanks, and sorry for the messy question.
Jimmy.
When you have a <script> tag, then the browser will handle the content as a script. You can define the content inside the start and the end of the script, like this:
<script>
//your code
</script>
Or you can specify the location where the script file can be found with the src attribute, like this:
<script src="http://yourdomain/yourfile.js"></script>
I think you are asking how to create web widgets that dynamically create DOM elements. embedded youtube and google +1 are widgets. an Iframe is just one approach to create a widget.
For moreore information on widgets- http://www.techfounder.net/2010/02/05/creating-embedabble-widgets/
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.
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.