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 ...).
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I want to know if it is possible to block JS, loaded by an iframe, from running on my Wordpress site. I currently embed iframe generated by a service I pay to use for my business. The iframe comes with Google AdSense ads embedded in it. Recently, the rogue pop-ups have been affecting my customers. Essentially, these are ads that run on the mobile version of my site and initiate a series of redirects. I can prevent these on my own device with an AdBlocker, but not all of my customers are that savvy.
I have tried to disable the Google AdSense ads a few ways: CSS display:none; (fails, as the JS is loaded even if the element is hidden with CSS), PHP (created a plugin that leverages wp_deqeue_script, targeting the google ad script files (blocks some JS, but ultimately fails to prevent every instance of the ads), and even HTML in the head section of my site, (the idea is that it prevents loading sources outside my domain, fails).
Is there a way to programmatically prevent these JS files from loading on my site?
There is not so much you can do about it. As #charietfl states in the comment you should think in the first place about not embedding this at all if that is a possibility for you.
From programming perspective there is only one reliable thing you can do: use iframe sandbox mode.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
This way you can prevent the IFRAME target from running ANY scripts - I do not know though if its a valid scenario for you. Otherwise there is actually no reliable way to affect the loaded iframe.
I'd like to track outbound clicks within an iframe on my self-hosted Wordpress site. I already use Google Analytics to track inbound visitors (GA code in the header), but I'd like to know which/how many of those visitors click on links within the iframe on each of my pages. For the record, the iframe does come from an external advertiser.
This is the iframe code I was given (using sample names in place of real ones):
<iframe src="http://www.advertisersite123.com//widget.html?width=510&height=950&product=2" frameborder="0" scrolling="no" width="510" height="950"></iframe>
This line of code is currently pasted on single.php, making a table of links appear on every single post at the bottom of the page.
I'd like to know how many clicks (just clicks in general is fine, don't need to know where they go) are occurring in this iframe. Ideally broken down by each individual URL on my website so I can determine which URLs are more successful in generating clicks within the iframe.
And if possible, I'd like to create a funnel that tells me which visitors to my website (by source) exit via clicks in the iframe.
Is any of this possible? And if so, what code do I add to the page?
Thank you for any and all assistance, it is appreciated!
What you are asking for is not easily done. In general, you cannot have javascript on the parent page that can hook into events on the iframed page if it is not hosted on the same domain. Same thing for the iframe page trying to tap into the parent page's DOM. This is called cross-site scripting (XSS), which goes against the same domain origin policy.
At a minimum, the easiest thing to do would be to put the GA code on the iframed page. But that's probably not something you can do (though it couldn't hurt to ask the vendor).
But some vendors (usually social media vendors such as Facebook, Google and Twitter) will have their widgets that output an iframe w/ info. They will set their server to allow for cross-domain scripting, which would allow you to tap into the iframe's DOM. Usually though they provide an API along with the widget that makes it easier to hook into relevant events (like share events), so that you don't have to do (much) coding yourself.
Basically long story short, there's no way for you to track it without the person in charge of the iframe domain getting involved.
I was searching for something similar and came across this. This jQuery Plugin lets you track an Iframe.
Tried events?
If the click is out of iframe:
_gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);
If the click is inside the iframe you should use:
window.parent._gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);
OK, so here is my issue. I'm building a system which will allow people to embed lists of links on their pages. When the link is clicked, i'd like to use something like Lightview or Lightwindow to open it up over the whole window, not just in the iframe.
I don't have access to the page that the user will be embedding this object into. Everything I've tried so far tells me that I can't open anything over the parent window, since I don't have access to it from the iframe or object, javacript security issue.
However, I've seen sites that do that kind of overlay. so it must be possible. If anyone can point me to any resources that could help, that would be great.
if it matters, i'm using Ruby on Rails...
Thanks...chris
It can't be done if the iframe is from another domain than the website, because:
You cannot change the dimensions of
the iframe from within it.
You cannot access the parent
document from within the iframe.
I suggest trying using some sort of JS file people will embed in they're website, in the place they want your links to be (something like Google Ads) and do a document.write to place
your links in their webpage. then, you will have access to the page, and can do a whole lot more :)
is this helping you?
As vsync said, you will have to have the user embed a script instead of the plain HTML.
This script has full control of the page, and if you also want it to be able to communicate with the framed document (your site), then you could use something like easyxdm to do cross document communication.
I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .