jQuery Copy text inside iframe to main document? - javascript

Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....

when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly

Related

Get iframe element of current CKEDITOR instance

CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?
If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow
I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).

Accessing iframe through console using DOM and BOM in JS

I've been playing around with DOM and BOM in JavaScript through Google Chrome's console trying to change locally input values, colors, etc...on different websites. I stumbled on a website that used iframe tags for it's form. I tried to change the value of the inputs located inside the iframe but couldn't get it done. My understanding is iframe incorporates a separate webpage inside of the one currently viewed.
My question is simple how do I access the tags inside of the iframe?
Things I tried so far:
document.getElementById("")
document.getElementsByTagNames("")
window.frames
window.parent
So an iframe is an inline frame, and what that inline frame contains is the building blocks to build a website, or display someone elses website. If you know DOM traversal you would basically have to select that iframe, and then go to select the DOM objects within that iframe from there to manipulate those.
iframe = $('#myId');
iframe.contents().find('htmlelements');
Here is a sandbox environment to begin understanding the traversal portion:
http://jsfiddle.net/fDFca/

How To Access and Click Button PhantomJS

I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.
I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!

Clicking element inside an iframe using jquery or javascript maybe AJAX

After going through numerous threads on numerous forums none of them come close to a solution to what I want to accomplish.
Here is want I want to accomplish:
I have a page on an iframe and I want to click a on a div tag inside that Iframe.How do I go about it .i have seen scripts that have mouse event emulator but I do not know how to use them.
Site 1 = http://site1.com/page.html
Site 2 = http://site2.com/abc.html
code for site 2:
Code:
<div>
<div>
<div attribute="text" onClick="somefnc();">
james bond
</div>
</div>
</div>
code for site 1:
Code:
<iframe src="http://site2.com/abc.html></iframe>
What I would like to do is to have a script that automatically click on james bond (the text within the div) bearing in mind I have no control over http://site2.com/abc.html
Preferably list the methods one could accomplish this and where can i learn such type "DOM" (javascript mainly dealing with mouse events) for free.
Any references are highly appreciated.A baby step walk through the code is highly appreciated.
I am noob in this area.
What I a have tried so far:
try 1: javascript
.click();
error of try 1:cross domain issues
try 2: mouse emulation
error of try 2: noobieness code to complex for me
please help.
guessing solutions
mouse emulation like scripts
some neat jquery code
AJAX ,PHP maybe
Unfortunately since you are dealing with two sites on different domains, I don't think it's possible.
Mouse Emulator
Mouse emulator scripts probably dispatch a click event on the page, but unfortunately dispatchEvent won't work for iframes on different domains. Can you post a link or code what you tried with mouse emulation?
If you tried:
document.elementFromPoint(x, y).click();
Based on this Stack Overflow post, the click won't work on a cross-domain iframe:
How to simulate a click by using x,y coordinates in JavaScript?
Quoted: "For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked."
If you tried:
el.dispatchEvent("click");
Then you need to get the element el somehow from within the iframe contents. Since the iframe is in another domain, you will be blocked from trying to get the iframe contents (using either JQuery or DOM).
var doc = iframe.contentDocument || iframe.contentWindow.document; // security error due to cross-domain
doc.getElement ...
(By the way, it would be easier to use jQuery to get the element since site2's code doesn't have an id on the element, and DOM doesn't provide an easy way to get elements besides by id or class)
JQuery
JQuery provides a function to get the contents of an iframe. Assuming that would work, then you could find the element in the iframe contents and trigger a click on the element. Unfortunately this will only work if the iframe is on the same domain.
var el = $("iframe").contents().find("div[attribute='text']"); // security error due to cross-domain
el.trigger("click");
AJAX, PHP
I can't think of a way to click something through AJAX or PHP. Using AJAX, you could potentially make a GET request to site2 to retrieve the contents of abc.html and insert that on your page, but again, you would have cross-domain issues performing a GET request to another domain from the browser. Instead, you could make a server-side request to get the abc.html (using PHP or other server side code), then you wouldn't have the cross-domain issue. You'd still need to request any css and whatever javascript file where the somefnc() function lives and whatever else it depends on, then somehow inject all that on your page and you still wouldn't actually be interacting with site2, just copies of its files. This would be hacky and tricky to get working, and it really depends on what site2's somefunc() does.
Other options:
Depending on what you need to do and what site2's somefnc() does, you could try to duplicate the same functionality instead of doing it through clicking on an iframe.
If you can work with site2, you could try postMessage to send a message to site2:
http://javascript.info/tutorial/cross-window-messaging-with-postmessage

load external site and change its visualization

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.

Categories

Resources