Simple question.
I cannot get a new opened window to use CSS.
var previewWindow = window.open();
$(previewWindow.document.body).append(data);
The data is just a stringbuilder generating html from our backend.
The problem is, I want the newly opened tab/window to use Twitter bootstrap, either CDN or use the file.
I cannot get it to work with, what I tought should be the solution
$(previewWindow.document.head).append('cdn or path goes here')
I cannot seem to find anyone else with this problem, or I need a lecture in Google.
As you can see, in the head the CDN is properly added. But the html isn't using any of the CSS.
You're using protocol-relative URLs.
However, since you don't pass a URL to window.open(), it displays about:blank.
Therefore, it tries to load about://netdna.bootstrapcdn.com/..., which doesn't exist.
You should use absolute URLs that include a protocol.
Related
I wonder if it is possible to get the page title of an url within IFRAME. I tried to use jQuery $('#iframe').attr('title') but that doesn't work. Please help. Thanks.
I think this is what you're looking for:
$(document).ready(function()
{
alert($('#iframe').contents().find("title").text());
});
That will return the page title that is located in the <title> tag of the iframe document that has the id "iframe".
I misread your question.
$('title', frames[frameName].document).text();
If what you are looking for is a way to get the URL of the iframe after the user has clicked on a link within that iframe, this is not possible in any modern browser that blocks cross-domain attempts.
Even though the iframe is part of the DOM and you can easily find the new iframe URL using apps like Firebug, Firefox will throw a XSS error on any attempts by js to directly pull that info.
But for the record, as it's already been said, the location within the DOM of the actual URL of the iframe content is (with a little help from jquery) : $("#id_of_iframe).contentDocument.location.href
I'm not totally sure if the above points straight to it with the above syntax, but that's the gist of it. The part that is a no-no is trying to go inside that contentDocument part.
I'm trying to create a web page able to change a site visualization (.css or / and .js) in order to recreate the same live change capability offred by Firebug for Firefox or the Inspector of Chrome.
Here an image to better explain my task:
I have been able to visualize the other site inside my page using the iframe, but unfortunately it is not possible to change its visualization and access its elements due to the "same origin policy".
Is there a way to do this using the iframe or loading the external site inside another element?
Update:
Considering the answers the options should be:
create a php proxy page to load the target site and change visualization on it.
create a browser extention.
I've tried the first, even if it requires to install a web server (xampp), with a simple page calling the function file_get_contents('http://www.site.com');
The page is loaded but unfortunately missed some elements (like images) and it is only a static copy; it is not possible to go further in the site navigation.
Update 2:
Load the entire page via javascript could be the better solution (I don't konw how) if it is possible to live change the code but what about the possibility to interact with this "page copy" and transfer the interaction to the original one?
Scheme:
Explanation:
I've noticed Firebug extention can select and live edit any page element, even if they belong to the iframe which loads an external domain page.
What I'm looking for is a way to act like Firebug, get an element and change its style.
I'm trying to load the site into the iframe beacuse I wanted to create a toolbar above it to select my "visualization styles"; for example a button to makes titles bigger and red.
Anyway I'm open to any other methods suggestions.
Update 3:
I have found an extention for both FireFox and Chrome which is really close to my aim: "Stylish"
This add on allows to live change any site css proprerty and save it in order to reload them every time you'll visit the page.
Now my question is: How can I do the same creating a dedicated page to load and change visualization of a specific site?
FINAL EDIT:
In order to continue this question with a more relevant arguments I decided to ask a new one: create a php proxy page
No. Your solutions may be
to let your own site act as proxy so the same origin policy isn't triggered
to build an extension, which will be browser dependent (Firefox or Chrome) and which will require authorization and installation
I'm not sure if I understand what you want very well, but my feeling to ''trick'' this easier would probably to give very specific height and width to your first site (the iframe) and do a jQuery condition
If ($('body').width() == 500 && $('body').height() == 400 {
$('body').addClass('isiFrame');
}
Then, you only have to do your css .isiFrame .myCoolDivs {....}
You might have to use it on a document ready also, but that could be one way to trick it and since you're not doing it on resize (exepect if somebody's having his screen at this exact width and height at start)
The safer way would probably to create a master session using PHP but I cannot give you an example since it've been to long and echo the body class if the master_session or variable is equal to true
Hope it helped!
If you try to fight Same_origin_policy and try to fight it I am sure you won't get much success their.
Server Side
I would suggest you Handle this on server-side, grab the web-page and apply whatever styling and scripts you want, should be very easy!!
If you use Ruby on rails - Nokogiri gem can help you to parse html. And you can use standard library to 'get' a webpage.
Client Side
If you want to do this on client side, you need to write some jquery/javascript code, you can take following steps:
Get the webpage you want to display.
Grab the element's which include js/css files, remove them and your own.
Display the page in new Iframe present in your page.
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.
I want a frame with a PDF document. The main document will use javascript to tell the PDF document what page to display and zoom level. Can this be done? If so, how or could you point me to documentation on it. Thanks.
You can't/shouldn't do it in a frame, but you can create an <object> on your page that is controllable using the JavaScript API.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/js_api_reference.pdf
Not easily. It all depends on what's being used to display the PDF in the browser. Not all browsers have built-in PDF viewers, and then there's many different external viewers (e.g. Acrobat, Fox-It, etc...) as well. As far as I know, there's
You can try hacking up the URL like this:
http://example.com/somedocument.pdf#page=5
but this may work in Acrobat only, as documented here: http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf
Do you need a PDF reader to be loaded and running? If not, you could write a back end script/program to render a specified page as an image (GIF, PNG, etc.) at a particular zoom level. Then your main page could load an image with something like:
<img src="render_pdf?page=4&zoom=150">
The src value could be controlled with javascript to make it dynamic.
To convert from PDF to an image in your render_pdf script, you can use ghostscript, or an image specific library like ImageMagick or GD, depending on what backend technology you are using.
Have a look at jsPDF - it may not output a .pdf onscreen in IE6 and IE7 due to limitations with datauri's, but its a good start. I dont see why this couldnt be built up in an iframe either.
As Jordan pointed out, you should use the <object> tag to embed the PDF. Then, in the PDF itself, you need to embed Javascript to handle the messages you pass in, such as:
if(!this.hostContainer.messageHandler) this.hostContainer.messageHandler = new Object();
this.hostContainer.messageHandler.onMessage = handleMessage;
function handleMessage(msg) {
// do stuff here
}
Finally, in your HTML JS, you pass messages in with:
document.getElementById('yourpdfobject').postMessage('some message or array');
I wonder if it is possible to get the page title of an url within IFRAME. I tried to use jQuery $('#iframe').attr('title') but that doesn't work. Please help. Thanks.
I think this is what you're looking for:
$(document).ready(function()
{
alert($('#iframe').contents().find("title").text());
});
That will return the page title that is located in the <title> tag of the iframe document that has the id "iframe".
I misread your question.
$('title', frames[frameName].document).text();
If what you are looking for is a way to get the URL of the iframe after the user has clicked on a link within that iframe, this is not possible in any modern browser that blocks cross-domain attempts.
Even though the iframe is part of the DOM and you can easily find the new iframe URL using apps like Firebug, Firefox will throw a XSS error on any attempts by js to directly pull that info.
But for the record, as it's already been said, the location within the DOM of the actual URL of the iframe content is (with a little help from jquery) : $("#id_of_iframe).contentDocument.location.href
I'm not totally sure if the above points straight to it with the above syntax, but that's the gist of it. The part that is a no-no is trying to go inside that contentDocument part.