inject javascript into an iframe for a portal application - javascript

I have an frame that has a web application inside it. it expects that certain javascript functions will exist on the page that it can call. How can I inject these javascript functions into the iframe from my parent application?

Your question is a little vague on details, such as whether you control the content inside the iframe or not. But there are a number of ways to go about accessing/applying Javascript between frames.
In the page contained within the iFrame:
parent.FunctionName();
This will call a function that exists within your main page that contains the iframe.
Similarly:
YourIFrameName.FunctionName();
Will call a function in your iframe from the parent.
You can also package the needed Javascript functions into a .js file. And include them in the header of whatever page needs them (the iframe and/or the main page).
Include this in your <head>:
<script type="text/javascript" src="YourJavascriptFile.js"></script>
However, if you do not control the contents, and run into the same origin policy, you have two options:
1) Rethink your application.
2) A workable mess: You would need to
call a script from the iframe that
does some cURL type magic to pull the
page contents of the included web app,
inject the needed Javascript, and then
output the altered contents in a
meaningful way.
If you decided you need to go the route of #2, I can edit with more specifics.

As Robert mentioned, I think that violates the same origin policy in most (if not all) browsers.
Alternatively, instead of trying to inject the functions into the iframe, why not have the iframe content reference them directly from the iframe's parent?

Related

UWP: webview does not display page using navigateToString method

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.

How can I recover my page from not being able to load a javascript file?

In a page that I work with, we load content from an external server from a provided dynamically created javascript file.
In one of the sections of the document that displays header content, we have the sample line:
<script type="text/javascript" src="externalScriptLocation"></script>
The problem is that when the external script location is down (it could be a 404, but in this case it's actually a 503 - service not available), most of the page's functionality appears to work but the page is not able to properly submit data.
Is there a way I can wrap this with a try/catch or something similar so that failure to load this bit of javascript (which is for a header element that, while it should be there, shouldn't cause these issues!) so that the site can function normally?
If it matters, the server side language is Java with Java Server Pages as the view.

Dynamically load & parse local HTML from within HTML?

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).

jQuery load function modified to include relevant scripts

Ive been playing with the load, get, ajax and get scripts function.
The most appropriate to the majority of function where I intend to load in content on a page would be the load function. It is a simple and effective way of getting the relevant content from an associate page.
But since it does not include scripts and the new content does not respond to the pages ready. functions I was wondering if there was a simple enhancement we could make that would allow the scripts of the page to be refreshed to include loaded content.
Something like
function loadall(url,container){
$(container).load(url);
scritps.reset();
}
What would be the way of doing this.

Inserting javascript/css into an iframe across different domains

I have a local webpage (on my file system). I wish to load an iframe on the page that displays domain.com. I wish to change the iframe contents.
I can get access to domain.com and can get them to host a javascript file for me. So this should mean I do not run into the issue of same origin. It take ages for my file to get uploaded as it is done by a different team etc. My idea was on the server domain.com in my js file I could call another js file on myserver.com. Is it is being included in the domain.com js file it should work... well it doesn't.
Is this possible?
domain.com js file is as follows:
$(document).ready(function(){
$.getScript("http://www.myserver.com/my.js");
});
my.js on my server is doing
alert($("iframeID").contents().find('body').html());
It is returning null
If in my.js I do
alert('test');
Test is alerted to me.
The Same Origin Policy applies to the page sources, not the JavaScript. If your page is from one place (a file:// URL) and the other page is from another domain, then it doesn't matter where your script is hosted.
I'm not sure I got your scenario 100%. Correct me if I'm wrong:
You have a page with an iframe, and the iframe points to a page at domain.com
The page at domain.com attempts to retrieve your script from myserver.com, using $.getScript()
The script, when loaded, needs to modify the DOM on the page in domain.com (the one in the iframe)
The element iframeID in your code sample alert($("iframeID")... refers to the iframe on your page, where the page from domain.com is displayed
If this is correct, the issue is that the javascript executing inside the iframe on domain.com knows nothing about the iframe. It doesn't even know it is in the iframe. You can manipulate the page like any other HTML document, because the script is executing within the page in domain.com -- it doesn't matter where the script originally came from.
So you can print the body of the page in domain.com very simply:
alert($(body).html())

Categories