I code a small tool to load an HTML page to an iframe. I wrote a little javascripts code to get XPath from element which I clicked.
But the problem is that the tool run smoothly with html page I wrote to test. But when I load an external site from internet, the tool doesn't work. Nothing happen. I think the browser disabled javascripts from external HTML Page. Can you help me to solve that problems.
Browsers block cross site scripting (XSS) like that. Meaning that you can't handle events at external sites/pages.
However, you should be able to run the tool if the page with iframe and the iframe's content page are located under the same domain. That's why your test works.
Related
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'm using CasperJS to scrape a website. The page source has a <noscript> tag, and therefore is not showing the page I need to scrape, because it claims I don't have JavaScript enabled.
javascriptEnabled is true by default in CasperJS, but I added it to my initialization anyway, to no avail.
Any work arounds to fix this issue? It might also be an issue with PhantomJS...
Ok this issue has been fixed -- I did the following, if anyone has any questions. The HTML was rendered by the JavaScript, which took a long time to load, so open it like you would normally in a browser, and find an element that only appears when the javascript loads -- note doing view source doesn't work you have to inspect element (you get current DOM).
I then did:
casper.waitForSelector('.SOME_CLASS', function() {
this.echo(this.getHTML('.SOME_CLASS'));
this.echo(this.getElementInfo('.SOME_CLASS').text);
});
This allows the page to stop and load the javascript.
I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
</div>
www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
<iframe src="www.myapp.com/names"></iframe>
</div>
The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..
Any idea?
Lets talk JQuery on this one.
Say you have your nice iframe (iframes aren't actually very nice) element
<iframe id="original" src="www.myapp.com/books"></iframe>
take note of the id tag.
then you got your javascript, enclosed in tags
var newIframe = $("#original").clone();
$("body").append(newIframe);
LINK ---> Check this all out at JSFiddle <--- LINK!
The best thing to do is probably write the html/javascript/css of your application as text in the second iframe.
You can get the contents of the first iframe
page=$("#iframe1")).contents().find("html").html();
and then set it to your second iframe
var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
You may not want to do a full copy like this, but I think this is a starting point.
I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.
Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery
EDIT
What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.
I have an iframe that loads a form from another site into my site (I control both domains but they are different).
The iframe is loaded into a fancybox on my site and I would like it to popup an AJAX loading graphic when the form in the iframe is processing.
I know I can't directly add event listeners to the iframe form other site but is there any way that my site can know what is going on in the iframe?
No there's no way of knowing what another iframe is doing.
Have the domain (the one inside the iframe) load the AJAX loading graphic before the content shows up, all on the server side... you don't need the client for this.
I agree with Luca, but then your form will have to be loaded before the AJAX loading graphic can be displayed. If it is a very large form, this might take a while and will perhaps defeat the purpose of the loading graphic.
Have you considered loading the contents of the form via javascript instead, bypassing the iframe altogether? Just GET the contents of the form and load it into a div? (Granted, if the form you're loading is complex, that might cause more problems)
It is absolutely forbidden by browsers to know what is going on in the iframe.
I have a web application that uses quite a bit of JavaScript.
When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.
How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?
Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?
UPDATE:
YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.
UPDATE 2:
The live site is linked below.
http://www.elite.com
What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.
A few possibilities:
Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)
Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.
Either way, if you post some code we can likely be of more help
Update:
If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)
Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.
The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.
I would move the Unica Page Tag (tracking) to the end of your page too.
You have 8 external script files - if there is any way you can combine them it would be good.
You don't have gzip turned on for most of those script files
All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.