Hi I've wrote simple Safari extension to display QR code with url to currently visiting website..This is part of code where I am appending the code to page..
document.body.insertBefore(qrdisplay, document.body.firstChild);
qrdisplay.appendChild(img);
All is wokring, but what sucks is, the code appends too to an iframe content..Actually nasty problem if every site contains facebook like box and lot of other crap:D Can I somehow append the element only to main body?When I would use some kind of "body child of body" selector it wouldnt work..It simply cant as there are two independent DOMs?Am I right?
Thanks for your advice, I hope you understand to my problem..
I think you need to check if window === window.top before running your appending code.
Related
I know there is plenty on the subject but not what exactly i want...
I've tried window.location.replace("http://gmail.com")but it replaces the content only in a specific <div> in the page instead of the whole page..
In the w3schools tutorials of location.replace for example
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_replace
It allows you to load the new URL in the box on the right of the page.
In my case, i want a javascript that will replace the whole page, and not only in the small box on the right.
I hope i was clear enough.
It sounds like you've got code in an <iframe>. If so, you can reload the whole browser window/tab with
window.top.location.replace("http://gmail.com");
I'm sorry if this wasn't the right place to ask. I'm having trouble figuring this one out.
What I'm trying to do is removing the demo bar provided by marketplaces like themeforest or mojothemes within my own demo site.
But since what appears in the marketplace's live demo of a theme is fetched, it appears within an iframe inside of their site.
I've tried asking in their forums but no one has been helpful.
Is there any way to do about this? An example done in a marketplace would be great.
The Answer is No. It is not possible to modify dome elements outside iframe by a script on site in iframe.
Reason: Since The Marketplace website is Accessing your Demo Site within iFrame at thier server.
Like how you embed a YouTube Video on your Page and Specify a Heading above it etc, does youtube or google map ever try to change their container styles? do they ever change the heading you wrote above the embed code?
Thats it
You cannot (due to the Cross Site Scripting - http://en.wikipedia.org/wiki/Cross-site_scripting) as it is a separated document. But what You can do is to use Web Messenging: http://en.wikipedia.org/wiki/Web_Messaging to affect JS/CSS within the iframe (but this will require actions on both sides).
If you can execute Javascript from within an iframe you can change the elements outside of it with the Window parent Property. Example usage:
parent.document.body.style.backgroundColor = "red";
changes the background of the <body> outside of the iframe.
I have a variable
var s="<p>long content.....</p><p>long content....</p>"
I put this inside a iframe by
$('#iframeid').contents().find('html').html(s);
And I set the translateX of iframeid dynamically based on the browser size. So when the browser is big both the paragraph are shown. And when the browser is small first paragraph is displayed on the browser.
Now when the browser is small I use
document.getElementById('iframeid').contentWindow.document.body.innerText
And I get "long content....." and when I use
document.getElementById('iframeid').contentWindow.document.body.innerHTML
I am getting the variable s value completely. I want to get only the html content of the displayed position
Any help is appreciated. Thanks in advance.
I think that it isn't possible...
I can only suggest to you something that can give you something to getting started on it.
Jquery, on a big HTML with scroll, how to capture only the visible part of the HTML?
or you can use this plug-in:
jQuery.fracs, see the demo: demo
Probably if you want to show a portion of HTML and get only this visible part you must think up something and probably you can't use iFrame.
$('<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
To make things easy, here's the site - http://schnell.dreamhosters.com/folio/pixelread.php View the source code all you like.
The middle button of the top bar in your browser window that says "Palette" is supposed to open up a fancybox in the middle of the screen, and that box should load into it the data inside the element with id of 'data', but it doesn't and comes up with an error message of "The requested content cannot be loaded. Please try again later." I took this example straight from the fancybox website and double-checked that all the CSS, image and JS files are in their proper place and loaded. So now I'm lost and no idea how to do/fix this.
PS - I use Google Chrome 6.0. I'll see if this happens in IE8 or Firefox.
PPS - Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
I think the problem is that fancybox isn't recognizing your content as being inline (not exactly sure why, but maybe something to do with the query string in the url, since it works when that isn't present).
I would try adding the explicit type: inline to your fancybox declaration:
$("a#inline").fancybox({'type':'inline'});