I have an iframe on my web page, the source url is a remote web page I don't have access to, the problem is that in that iframe body onload event, there is a JS function:
<body onload="if(top!=self) top.location.href=location.href">
so that will change my webpage to their webpage url. is there anyway I can use javascript on my web page to disable or rewrite the body onload function in that iframe? I think that is different from the iframe onload event.
The only way to even try to bust this would be to use server-side code (PHP, Ruby, Python, etc.) to essentially proxy their page into an iframe that you control. You could grab the source of their document and do a replacement to get rid of their onload event server-side.
You'd want to set up a structure something like:
AppFolder
index.html
your_iframe.php
In your iframe, simply download the contents of the url and do a replacement and echo back out to the browser. There are still a number of issues that you'd have to workout, such as relative resource paths in the iframed document.
Related
I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.
Please guide me. Is possible to read script tag src URL content using JavaScript/jQuery. Please don't suggest JSON/Ajax/iframe options.
I have tried like
<script src="http://www.test.com" id="test">
document.getElementById('test').src
but it give only src URL.
My Exact requirements is,
I have two application, each in different web server with www.siteA.com and www.siteB.com.
In Server2, I have cross origin and iframe restriction to access the application. Example: If a request is coming from server1(siteA) to server2(siteB) via Ajax or iframe, it's restricted to access the siteB page content. But If I load siteB in script tag it's loaded, but I'm not able to get the content.
So I mentioned above, don't suggest iframe and Ajax. Help me to achieve this.
The best way really is AJAX, but it does sound like CORS is an issue for you. The only other option I can think of would be to open the page in a new browser window, although I don't know what kind of user experience implications that will have on your application.
You can open a new browser window by:
function showContent(){
var url = document.getElementById("test").src;
window.open(url, "_blank");
}
Although if you take this route, you shouldn't put the url on a script tag, because the browser will download it once (via the script tag), and then a second time on the window.open.
A bit of an unusual setup:
I'm writing in an html page that in turn loads another html page, parses it, analyzes it, and displays information about it.
The parsing is fairly easy using jQuery. I just need to figure out how to load the external page - that is, when page A is displayed in the browser, it needs to load page B, analyze page B, and display information about page B.
Both pages are local (not served via a web server).
Both load and ajax from jQuery run into the cross-origin permission issue:
XMLHttpRequest cannot load file://localhost/Users/me/test.html. Origin null is not allowed by Access-Control-Allow-Origin.
I can load the page with a script tag, but then I don't know how to access it so I can parse it:
<script type="text/html" src="test.html"></script>
Any ideas?
Have you thought about using JavaScript/jQuery to create an iframe? (You can use CSS to make the iframe hidden to the end user.) Then you can listen for the iframe's onload event, and parse it through the iframe's contentDocument element (I believe).
I'm trying to trace how my GWT page loads
Tracing using Firebug after mymodule/mymodule.nocache.js has loaded a GET request is fired with request to cache.html file like this:
EF0C179631C4491034C07C47610CF86E.cache.html
I tried to hook on XMLHttpRequest via Javacript, I was able to intercept the loading of the module nocache.js and other resources on the page but not this cache.html
For example I was able to intercept the loading of a gif and extract its src attribute which is fired from a GWT generated img tag:
http://localhost:8080/MyModule/gxt/images/default/shared/blue-loading-3d.gif
So I was expecting that I can also intercept the loading of that cache.html.
I am wondering how this html was called. Anyone knows? Is it fired from a anchor "a" tag? Or other?
It's loaded in an iframe. Like that: iframe.contentWindow.location.replace(base + initialHtml);
I download via jQuery AJAX a whole html webpage. I want to replace the content of the current page with the one downloaded via ajax. I do it with document.write(). It doesn't work correctly because whenever I try to modify the hash, the webpage is reloaded.
I know in IE it it necessary an iframe, but that is not the problem, because I use jQuery History plugin. The problem is due to the use of document.write(), but I don't know why.
Update:
index.php -> main entry point, which downloads JS code to parse URL after hash and invoke request.php.
request.php -> request entry point. It returns the webpage.
It works OK when I simulate a direct request to request.php and the downloaded webpage updates the hash.
It doesn't work (in FFox only) when I simulate a original request to index.php, which downloads the webpage via request.php and the downloaded page modifies the hash.
I use document.write() to write the content of the webpage to the current window. So the problem is about the modification of the hash in a document "being written".
don't use document.write().
instead use $('your selector').html(your_html_fetched_via_ajax);
I thinkg that you can't modify the whole html object because it means erasing the reference to the javascript script tag. I would say your best bet is to either just link to the request.php page or just change the body tag
$('body').html(response_html);
And I agree with harshath.jr, don't use document.write().
The individuals pointing you towards an iframe are correct. Add the iframe, and simply set the src attribute to the page you're fetching...you won't even need request.php.
If you really want to try to load in the html without an iframe, you'd have the parse out the elements in the head and add them to your documents , and also parse the contents of the and add them to the current pages body. Its not guaranteed to display correctly, though. I think an iframe is really what you're looking for.