I'm trying to create a visual editor where the user creates a 3D scene, and my application writes the code for the project itself. I want to create a testing feature where the code that was generated is run. I've looked into using iframes, but as far as I know, you need a specific URL for iframe.
Here are some ideas/solutions I've come up with:
Is there a way to manually feed code to an iframe, without a file or URL?
Is there any other easier way to accomplish this task?
Can this be done without server side code?
Let me know if you need any more information. Thanks!
Yes it is possible however a much simpler way would be to just create another html file somewhere on your server/host and just disallow external access to it so it's only accessible from the iframe.
You have to use an script to give code to an iframe without a source file like this:
<iframe id="my-iframe"></iframe>
<script>
document.getElementById("my-iframe").contentDocument.write("<h1>Hello World</h1>");
</script>
Change the JavaScript to this to overwrite all of the content of the iframe:
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h1>Goodbye World</h1>";
This overwrites all the content of the iframe with your own.
This will work but it will be a big pain to format the html from the iframe. Also as far as I know this is the simplest way that fits your needs.
Related
I am currently working on a PlayCanvas project which is going to be embedded in an iFrame inside a slideshow(Articulate Storyline). The slideshow application lets me use Javascript by using:
player.SetVar("Result",score);
where player is:
parent.getPlayer();
The structure ends up being, each being a child of the former:
Main html file(slideshow)
iFrame (with source on the same domain)
Canvas
JS script inside PlayCanvas application
My main problem here is that I can't call getPlayer() without accessing the iFrame, but parent.document.getElementById('') returns null. I feel like I'm overlooking something very obvious but I can't get it working.
Thanks in advance, and if my formatting/question is incorrect please let me know so I can update the post!
Well, found the issue, Articulate uses GetPlayer() instead of getPlayer(), cost me way too long to figure that out.
I am trying to create a click event on an iframe:
This is what I'm trying but without success:
$('iframe').contents().find('#theButton').click();
What I'm I doing wrong here?
As a security principle; You are not allowed to do anything in an iframe that's base uri is different from what is in the address bar; You just allowed to manipulate the iframe'e that's src tag is equal to page's.
Think about what would be happen if you insert a bank's internet banking in an iframe and cheate the people and in backend change the source of money transfers to your own account :D
but what you can do is to get the html source code of the where you want to show in an iframe; and show it using javascript; then you will be able to treat with that source code like your own.
try in this way it will work for u
$('iframe').load(function(){
var iframe = $('iframe').contents();
iframe.find("div").click();
});
I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.
My site calls an external JavaScript file to create the footer on every page. I would like to include a follow button in the footer. However, all of the examples on the developer page are geared toward creating the button from an HTML file with embedded script, and I am not experienced enough with JS to figure out how to rewrite the code to work without the HTML. I have already tried storing the whole HTML blob as a string and writing it to the document. I also took the JS out of the blob and added it to the file, but that didn't work either.
Here is the HTML they provide, and I tried to extract
Follow #dbb0
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
To answer your main question: yes it's possible.
You should use the DOM, innerHTML (be careful with this) or jQuery to create a very similar html structure, and then add it to your document.
You should ask more specific questions to get further, this is too vague :)
I have a script which loads content into a iframe using:
document.GetElementById('iframeid').src = 'site.html';
Now, the problem is that I want only a portion of the page loaded. If I could use jQuery I would specify which part by:
$('#iframeid').load(src = 'site.html .classforportion');
However if seems like jQuery .load doesn't work for iframes.
Is it possible to 'fool' the browser into grabbing the contents of a variable or a function for the first case? Or is it possible to create temporary 'html'-files only for so long that the script would load the right contents into it and pass it to an iframe (hm... seems unlikely...).
A work around solution for this specific case would be removing the first line of the loaded page. Is that possible with javascript or jQuery? Is it possible for this situation involving the iframe?
Thanks, going crazy over this thing! So, any help appreciated!
Ive never heard of a way of doing this with javascript since you cannot access files outside your own domain with javascript. You can do like this with PHP
<?php
function get_content_part($part=null, $website = null)
{
$website = file_get_contents($website);
$data = str_replace("\n", '', $website);
echo preg_match("/\<div class\=\"'.$part.'\"\>(.*)<\/div\>/",$data,$match);
return $match;
}
?>
Maybe integrate this with a javascript Ajax call and you can do it by javascript calls.
Best regards
Jonas
Now, the problem is that I want only a portion of the page loaded
Load page into the invisible container (iframe, div, etc..) or in a javascript string variable and do whatever you want to do with it. For example, load partial content into invisible div and than copy it into iframe or load the hole page into invisible iframe and then copy the part you need into another, visible one.