Reload a page inside iframe - javascript

I have an iframe and I want to reload the currently displayed page on button press.
HTML:
<iframe id="webView"></iframe>
JS:
function reloadPage()
{
var webView = document.getElementById("webView");
//CODE
}
Inside the reloadPage() method I tried different solutions:
Call reload()
webView.contentWindow.location.reload();
This just doesn't work because the pages loaded inside the iframe are from a different domain than the main page.
Set src
webView.src = wevView.src;
It gives wrong result because it contains the initial url that I set to the iframe, non the current one.
Set location
webView.contentWindow.location = webView.contentWindow.location
I was expecting it to not work with urls from different domains (the same as calling reload()), but actually it works and also gives a good result.
Good but not perfect: the location object holds the current url but strips any parameter.
For example if the frame is currently displaying the following url:
http://www.myserver.com/thatsite/?page_id=11
the location object contains this url:
http://www.myserver.com/thatsite/
So this one works well as long as there are no parameters in the url.
Better solution?
I rely heavly on urls with parameters (mostly WordPress installations) so i need a way to keep them while reloading.
Anyone knows a solution to achieve this?

just not possible, see this thread:
Get current URL from IFRAME
and this one
How do I get the current location of an iframe?

Since setting location works, you could use location.search to retrieve the GET parameters and reconstruct the URL that way.
Example:
webView.contentWindow.location = webView.contentWindow.location + webView.contentWindow.location.search

Related

Differentiate between youTube URLs and the file names of embedded MP4s?

I want to, in my init() function, check to see if the video is either a youtube URL or a file name.
Does this seem suitable or is there some kind of edge case I might be missing?
function init(){
playerSource = Document.getElementById('vid').src;
if ( playerSource.includes("https://www.youtube") ){
//Call to function that begins setting up YT iFrame API
}
}
Thanks in advance!
You can validate the youtube URL using below regex.
regExp = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
Youtube has different url forms depending upon where you are taking from
Normal Url
https://www.youtube.com/watch?v=12345678901
Share Url
https://youtu.be/12345678901
Share Url with start time
https://youtu.be/12345678901?t=6
Mobile browser url
https://m.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1
Long url
https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=smKgVuS
Long url with start time
https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=12345678901&t=38
You can check these URL validation below
https://regex101.com/r/7a1lGH/1

How to disable direct access to Iframe

Let's say normally my users access our web page via https://www.mycompany.com/go/mybusinessname
Inside this web page, we have a iframe which actually comes from https://www.mycompany.com/myapp
Everything is working fine, except that if for some reason, the users come to know about this url https://www.mycompany.com/myapp. They can start accessing it directly by typing into the address bar.
This is what I want to prevent them from doing. Is there any best practice to achieve this?
==== Update to provide more background ====
The parent page which is https://www.mycompany.com is the company's page and it's maintained by some other team. So they have all the generic header and footer, etc. so each application is rendered as an iframe inside it. (This also means we cannot change the parent page's code)
If users access https://www.mycompany.com/myapp directly, they won't be able to see the header and footer. Yes, it's not a big deal, but I just want to maintain the consistency.
Another of my concern is that, in our dev environment (aka when running the page locally) we don't have the parent-iframe thing. We access our page directly from http://localhost:port. Hence I want to find a solution that can allow us access it normally when running locally as well.
If such solution simple does not exist, please let me know as well :)
On your iframe's source, you can check the parent's window by using window.top.location and see if it's set to 'https://www.mycompany.com/go/mybusinessname'. If not, redirect the page.
var myUrl = 'https://www.mycompany.com/go/mybusinessname';
if(window.top.location.href !== myUrl) {
window.top.location.href = myUrl;
}
I realized we already had a function to determine whether the page in running under https://www.mycompany.com. So now I only need to do the below to perform the redirecting when our page is not iframe
var expectedPathname = "/go/mybusinessname";
var getLocation = function (href) {
var l = document.createElement("a");
l.href = href;
return l;
};
if (window == window.top) { // if not iframe
var link = getLocation(window.top.location.href);
if (link.pathname !== expectedPathname) {
link.pathname = expectedPathname;
window.top.location.replace(link.href);
}
}
You can use HTTP referer header on server-side. If the page is opened in IFRAME - the referer contains parent page address. Otherwise, it is empty or contains different page.

iframe .contents doesn't find content

I'm trying to load a page as an iframe and then extract some information from it.
function calleniro(who, where, announcementID){
var url = 'https://personer.eniro.se/resultat/'+who+'/'+where;
var frameid=announcementID.substr(0,7)
var iframe=$('<iframe />', {
src: url,
id: frameid
}).appendTo('body');
iframe.load(function (){
var frame = $('#'+frameid).contents;
console.log(frame)
});
}
the console.log($(frameid)) renders the iframe-node as desierd, when I add content it seems to be not find anyting
var frame = $(frameid).contents().find('body');
doesn't work either.
Due to the Same origin policy you cannot interact with content outside of your domain.
If your only intent is to load the page to get values from it (i.e not actually display the IFrame) you could simply $.get() the Eniro url to get the raw HTML response and then parse it from there. I think that should be possible with jQuery, might require some tinkering though :)
Update
As has been pointed out, the same origin policy applies to my solution as well (learning something new every day!), however it should be perfectly possible to apply the solution at the server instead

History API and domain-level urls

I have two pages on MyDomain.com. The index view which is visible from MyDomain.com/ and MyDomain.com/Foo/Bar. Each view has an ajax call to the other and each one pushes the state using the HTML5 History API.
There are the steps that create the problem:
Start at MyDomain.com/ (Works as expected.)
Click the ajax link to MyDomain.com/Foo/Bar/ (Works as expected.)
Click the ajax link to MyDomain.com/ (Works as expected.)
Click the ajax link to MyDomain.com/Foo/Bar/
Now the URL appears as MyDomain.com/Foo/Foo/Bar/
I don't want a Foo Foo Bar.
My current workaround is to add "../../../" to the front of the URL, but this is inelegant and not foolproof. Another option is a regex expression to count the directory levels.
Is there a better way to get absolute URLs with the History API?
function push(updateElementID, controller, action, url)
{
if (typeof url == "undefined")
{
url = "/" + controller + "/" + action;
}
var state = {
id: updateElementID,
controller: controller,
action: action
}
history.pushState(state, null, url);
}
You may want to ensure that the base element of the href element in the DOM is cleared...at least in the following case, it works for me: On your shared layout page (_layout.cshtml), reset the absolute URL within the DOM by placing the following within the head tags:
<base id="htmldom" href="http://localhost:59805/"/>
of course replacing your port # and on launch, replacing the root URL to the actual domain name.
By doing this, you are setting, or resetting the href property and specifying a base URL for all other relative URLs.
Now would doing it this way would affect any user-input data preserved in the page between back and forward buttons? I'm guessing it would be fine, as the above only resets the href property, and any other info in the DOM should be there.

How to go to url in same server without setting complete url address - JavaScript (with/without) jQuery

I know how to go to link / url / address, like;
window.location = "www.example.com/index.html";
or
document.location.href="www.example.com/index.html";
But suppose I want to navigate from index1.html to index2.html, how can i achieve this without providing the www.example.com/ prefix? Please don't suggest that I set www.example.com/ in a global variable / constant. The address may change to www.example2.com/subfolder1/subfolder2/ to www.examplea.com/.... The mentioned methods works only in the case of root pages. I mean, providing document.location.href="index.html"; will navigate the browser to rootdomain/index.html, even if I am staying in rootdomain/section1/section2/somepage.html. But I want to navigate to rootdomain/section1/section2/index.html
How can I achieve this by providing just the page name?
If you have a / at the beginning of your string, it'll go to the local page:
window.location = "/index.html"
Just like you would do otherwise, but using the relative path:
document.location.href = '/index2.html'; //relative path
window.location.pathname = 'index2.html';
You can also just use relative urls on the document.location.href.
What might be even better is window.location.assign('index2.html');. This is especially useful when you're at www.example.com/foo/.../index1.html and don't want to specify the whole path to get to www.example.com/foo/.../index2.html.
For more options, see https://developer.mozilla.org/en-US/docs/DOM/window.location .

Categories