How to click iframe element in wordpress (all pages)? - javascript

I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe

As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.

Related

Accessing html elements from another page inside div

So I'm pretty new to html/javascript but i'm working on a project where i'm loading a external html page inside a div, that when loaded looks like so:
<div class="content" id="content">
<object type="text/html" data="./ProjectsHTML/radio_project.html">
#document
</object>
</div>
and inside the '#document' is the external html. This external html contains some titles that can be minimized and maximazed to hide/show their content.
I have a side-menu on the main html that displays all the titles (the titles were hard coded on the side-menu) and I want to access the titles position inside the external html so when the title is clicked on the side menu, the external html autoscrolls to the position of said title.
If it's usefull for the solution, I'm using Electron.
Please help :)
Assuming the pages are from the same domain, a similar question is addressed here.
However, if the page within the iframe is from a different domain, you won't be able to access individual elements - that's cross-site scripting, and it is a security vulnerability.
There are a few options if you own both pages, even if they are on separate domains:
You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
You could post messages to the iframe and handle "scroll requests" in the hosted page. You will want to be careful with validation of the source of those messages.

Trigger redirection to another page if specific page is loaded within an iframe

I am using Limesurvey to create a customer survey. As I want to embed the survey at my company's homepage, I am using an iframe to make that happen. This ensures that I have my official header and footer available and I don't have to rebuild that elements in Limesurvey.
Limesurvey offers a possibility to redirect to another page after somebody has completed the survey (e.g. a thank you page). As I am embedding Limesurvey, I cannot redirect to my offical thank you site from my company's homepage as I would have double header and double footer.
What I have thought of, is to redirect to a dummy site. From the parent site, I want to check for that event and trigger my redirection to my thank you site.
I have no idea how to do that in Javascript. How do I define an event listener to check if a specific site has been loaded within the iframe and then fire my redirection in the parent.
Thanks a lot!
You can inspect the URL in the IFrame using <element>.documentWindow.location.href if it is on the same domain:
e.g if your iframe had id 'frame'
document.getElementById('frame').documentWindow.location.href
However, You can't inspect the URL inside an IFrame if the IFrame is on a different domain, this is due to a security mechanism in modern browsers.
If you are not in the same page it will raise an exception:
Error: Permission denied to get property Location.href
See this SO answer for more detail also as noted here the property is named differently in chrome: documentWindow is called contentDocument in Chrome

Javascript integrated web browser?

I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).

Controling link behaviours in an Iframe

Ok so any help here would be great
I have a HTML page with an I frame loading a site of mine in it…
What I need to do is check in the iframe from the main document, the target attribute of a link and if it's blank, hijack it and add my own custom functionality from outside of the iframe in the main HTML document
The issue I have is the site being loaded in to the frame is on a different domain so I am not sure if this can be done? I have full control of the site been loaded in to the I frame so is there something in there I can set to allow it?
What I effectively want to do is hijack the links in an iframe which I guess could be an issue?
Can this be done, alternately does anyone know a way I could achieve what I am trying to do?
Thanks

Open MilkBox outside of an iframe

I have a page with content loaded in via iframe, and the pictures within the content area open up in MilkBox, similar to LightBox. Here's the URL so you can check it out:
http://interplay2010.com/
Under the Media section, the pictures open up within the iframe. I would like the pictures to open up outside the iframe, but I have no idea how to do this.
First of all your page loads much too slow. Try to use compression. You also use 15 external JavaScripts and 7 stylesheets and 20 external background images, thats quite a few HTTP Requests. You also mingle mootools with YUI. Why don't use just one Framework?
Enough nagging, now to your question: The milkbox is set up inside the iFrame, so in order to let the pics popup outside the iFrame you would have to alter Milkbox itself. That is 770 lines of JavaScript. Your best bet is to find the right method inside Milkbox, changing the target of the popUp to its parent frame; that is where the navigation and background picture resides in.
http://interplay2010.com/scripts/gallery/milkbox.js

Categories