jQuery AJAX URL getting folder prepended from iframe - javascript

I am trying to make a jQuery AJAX call from an iframe. I can't put my code here, but I will try to create a similar example.
My actual page is served from localhost:3000/dev-file-import. The page contains the code to render an iframe like the below
<iframe id="fileimport"
src="../../fileimport/index.html?${encodeURI(dataToIframe()}"
title="fileimport"
width="100%"
height={600}
frameBorder="0">
The index.html contains an AJAX call which should be like https://localhost:3000/mock/../../... but when the AJAX call is happening from the iframe it's prepending the iframe path as well, ie. https://localhost:3000/**fileimport**/mock/...
How can I stop the fileimport getting prepended when the AJAX call happens?
FYI: My parent application is in React, and the iframe code is in jQuery.
Please find the folder structure below
My folder structure
iframe code from public

Related

iFrame src property and relative URLs not working

I have a web page that has an iFrame in it with a definition in the HTML like the following:
<iframe id="page_is_fresh" src="~/HTML/fresh.html" style="display: none"></iframe>
My site is running under a subfolder /Marketing so all urls are something like http://myserver/Marketing/SomeFolder/someitem.html
I have javascript to change the src of my iframe when an item on the form changes.
$('#page_is_fresh').attr('src', '/HTML/stale.html');
The problem is, this makes the url http://myserver/HTML/stale.html
I tried using '~/HTML/stale.html' and that gives me http://myserver/Marketing/SomeFolder/~/HTML/stale.html which doesn't work either.
How can I get it to give me http://myserver/Marketing/HTML/stale.html without having to hard code the /Marketing part in?
Use ../HTML/stale.html instead of ~/HTML/stale.html or /HTML/stale.html in your javascript.
The server considers ~ to be a directory in the way you formatted it.
../ lets the server know it needs to start one directory up

How to load content with AJAX that contains a script?

So I am working on a website trying to use jquery/ajax to load content into the home page. Current test site is [http://newconstructionflorida.net] the home & about me page work without any issue, however the property search link does not load.
The content/property-search.php file I am trying to load contains a script:
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=115580&SearchSetupID=143&LinkID=0&Height=2000"></script>
What am I missing to be able to get this script to execute when loaded via AJAX? If I insert it into the home page directly it works without issue so it must be related to the jquery/ajax.
Loading .js scripts via ajax is not a good idea since .js scripts functionality is always bound to the loaded HTML DOM and my not work properly if loaded asynchronously via ajax after the DOM is fully loaded.
What you can do is loading the script once the ajax response is completely received using javascript functions like getScript() or .append().
See this answer here on how to use javascript to append an external script to your page:

GWT Loading process

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

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

Why can't I reference JavaScript files in my View?

My JS works when I reference it in the MasterPage, and it works when I reference it in a Partial View (.ascx), but not when I reference from the View (.aspx).
Any ideas why?
Is the path to the script file correct in your View?
If you inspect HTTP traffic with something like Fiddler or Firebug's Net tab, do you see your script resources being downloaded to the browser?
You might want to use UrlHelper.Content and the relative path to render the script source in the page or perhaps create a HtmlHelper extension method to render out a script tag for you (I think one exists in MVCContrib if you're using that already).
So if you have a block declared in an included file (let's just pretend it looks like)
function alertMe(someValue) {
alert(somevalue);
}
and in your master page, aspx, and ascx you have
<script type="text/javascript">
alertMe("some string");
</script>
and it works in the master page and the ascx but not the aspx?

Categories