Newbie question here. I have searched a lot and found different parts of the solution but I cannot work out how to put everything together. I hope you can help me.
I need to add a link to my site which will open a new window with specific size in the bottom right corner of the screen. I found this code doing exactly that:
<a onClick="openWindow(); return false;"http://www.example.com">Ask your question!</a>
<script>
var topsss=screen.height-500;
var left=screen.width-400;
function openWindow() {
window.open("http://www.example.com", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top="+topsss+",left="+left+",width=400,height=500");
}
</script>
Within the new window I don't want to show mysite.com but I need an iFrame showing the content.
I managed to get a new window with the iFrame but the content is not showing in the iFrame:
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=420,height=515");
myWindow.document.write('<iframe width="400" height="500" src="http://www.example.com"
frameborder="1" allowfullscreen></iframe>');
}
</script>
Can you help me to put this all together and make this work?
Thanks for your help!
//Manon
I guess that you want to display a form for the user to fill, instead of opening new page for that.
Would it be possible to contain that form/page for all of your pages and have CSS trick to show/hide it? I know it's not what you are asking but the iframes and new pages could just cause you problems, cross-domain-scripting, and overall iframe is controversila (some consider it dead and deprecated by html5). So there might be a more elegant way to do the same with just CSS/JS, you can do more conditions, more controls where it will be placed and what it will do (animations, effects, some interaction with your original page).
https://allyjs.io/tutorials/hiding-elements.html
If you are making a SPA style website then maybe you are not aware of SPA frameworks? There is a lot of JavaScripts frameworks doing these things for you:
https://en.wikipedia.org/wiki/Single-page_application
I'm modifying a cefsimple app to meet my needs. I have a long starting thread at the background so it takes a while until the web page is shown (5-10 secs). In the meanwhile I want to show some kind of splash screen, or at least some HTML before the main page is rendered. What's the best (or any) way to do it?
Thanks in advance!
We have an html file compiled into our application and we pass that URL to CefBrowserHost::CreateBrowserSync().
See resource_util_win.cpp in cefclient sample, in particular GetResourceId() for associating the URL to the compiled resource ID.
Meanwhile, the body of our splashscreen.html has
<body class="splash" onload=" pageLoad() ">
and the pageLoad() looks like
function pageLoad() {
window.location = "www.yourrealurl.com";
}
}
Our splash screen has a background set by style sheet and an animated gif, and it goes away as soon as the requested url comes in.
If you have already gotten the server response but it takes a long time to render, this won't help. We use Angular in the loaded page to hide it until it is finished loading its dependencies.
<div ng-cloak class="ng-cloak" ng-if="IsInitDone()">
when my application launches in the IE from start page to main page i want to hide the addressbar and the standardbuttons bar of IE through the codebehind and here am using masterpage concept so i have to write the code in master only i think so....can anyone help for this
AFAIK you cannot disable address bar and button in IE from when the application starts unless using some ActiveX, Flash, ... Only if your application opens new window popups you could hide them.
I just found a way... It works atleast in IE 7... Not sure about other browsers...
<html>
<head>
<script>
if (window.name == 'default') {
window.name = 'Hai';
window.open('main.html', '_self'); // Current html file name
}
else if(window.name == '') {
window.name = 'Hai';
window.open('main.html', '_self'); // Current html file name
}
else if(window.name == 'Hai') {
// Use your application startup page here along with the desired options
window.open('newfile.aspx','NEWWINDOWNAME', 'Status=0, location=0');
window.close();
}
</script>
</head>
<body>
This window automatically closes itself
</body>
</html>
The complete list of options are available here.
Hope this helps.
Explanation : (AFAIK) Generally when javascript uses window.close method to close the active window, IE will ask for a confirmation from the user. Such confirmation will not be asked when the window is a popup window opened previously by a javascript along with a name.
The above just fakes the same, by opening the same file in the same window but this time with a name. As a result when window.close is executed, IE recognises the current window as a window opened using Javascript and as it also has a name, it just closes the same without confirmation.
Of course, I get a general Javascript alert at the beginning of the load, but since (I presume) you will be using aspx or other types, this problem will not be there.
I'm implementing a search service called SearchInsideOut.
This search service simply replaces web page results by full web pages (Yes, I used iframe).
The problem I have to deal with is iframe-breaking pages.
The promising solution I found is using onbeforeunload to let users decide whether to stay or leave my site.
But this also creates another annoying behavior.
When users click other links in my site, onbeforeunload will also be triggered.
Fortunately, I could solve this case by placing window.onbeforeunload=null in the onclick event of those links of my site.
Unfortunately, I have no idea how to detect external events like clicking "refresh/back" buttons.
What should I do to solve this difficulty?
All suggestions and comments are highly appreciated.
Take as example this site. Try to refresh the page after u typed some text answering to a post. You will see that the page it will ask you to continue ur work or exit. Make another test without answering to a post, just refresh, you will see that the confirm will not showed, because the site is making a test if the "answer" is empty or not.
Example:
<html>
<head>
<script>
function closeIt()
{
var mytext = document.getElementById("mytext").value;
if(mytext != "")
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = closeIt;
</script>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>
So it's up to u to decide when the box will show or not. Visit also Microsoft Msdn to understand when and how onbeforeunload works
I have built a basic data entry application allowing users to browse external content in iframe and enter data quickly from the same page. One of the data variables is the URL.
Ideally I would like to be able to load the iframes current url into a textbox with javascript. I realize now that this is not going to happen due to security issues.
Has anyone done anything on the server side? or know of any .Net browser in browser controls. The ultimate goal is to just give the user an easy method of extracting the url of the page they are viewing in the iframe It doesn't necessarily HAVE to be an iframe, a browser in the browser would be ideal.
Thanks,
Adam
I did some tests in Firefox 3 comparing the value of .src and .documentWindow.location.href in an iframe. (Note: The documentWindow is called contentDocument in Chrome, so instead of .documentWindow.location.href in Chrome it will be .contentDocument.location.href.)
src is always the last URL that was loaded in the iframe without user interaction. I.e., it contains the first value for the URL, or the last value you set up with Javascript from the containing window doing:
document.getElementById("myiframe").src = 'http://www.google.com/';
If the user navigates inside the iframe, you can't anymore access the value of the URL using src. In the previous example, if the user goes away from www.google.com and you do:
alert(document.getElementById("myiframe").src);
You will still get "http://www.google.com".
documentWindow.location.href is only available if the iframe contains a page in the same domain as the containing window, but if it's available it always contains the right value for the URL, even if the user navigates in the iframe.
If you try to access documentWindow.location.href (or anything under documentWindow) and the iframe is in a page that doesn't belong to the domain of the containing window, it will raise an exception:
document.getElementById("myiframe").src = 'http://www.google.com/';
alert(document.getElementById("myiframe").documentWindow.location.href);
Error: Permission denied to get property Location.href
I have not tested any other browser.
Hope it helps!
document.getElementById('iframeID').contentWindow.location.href
You can't access cross-domain iframe location at all.
I use this.
var iframe = parent.document.getElementById("theiframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var currentFrame = innerDoc.location.href;
HTA works like a normal windows application.
You write HTML code, and save it as an .hta file.
However, there are, at least, one drawback: The browser can't open an .hta file; it's handled as a normal .exe program. So, if you place a link to an .hta onto your web page, it will open a download dialog, asking of you want to open or save the HTA file. If its not a problem for you, you can click "Open" and it will open a new window (that have no toolbars, so no Back button, neither address bar, neither menubar).
I needed to do something very similar to what you want, but instead of iframes, I used a real frameset.
The main page need to be a .hta file; the other should be a normal .htm page (or .php or whatever).
Here's an example of a HTA page with 2 frames, where the top one have a button and a text field, that contains the second frame URL; the button updates the field:
frameset.hta
<html>
<head>
<title>HTA Example</title>
<HTA:APPLICATION id="frames" border="thin" caption="yes" icon="http://www.google.com/favicon.ico" showintaskbar="yes" singleinstance="no" sysmenu="yes" navigable="yes" contextmenu="no" innerborder="no" scroll="auto" scrollflat="yes" selection="yes" windowstate="normal"></HTA:APPLICATION>
</head>
<frameset rows="60px, *">
<frame src="topo.htm" name="topo" id="topo" application="yes" />
<frame src="http://www.google.com" name="conteudo" id="conteudo" application="yes" />
</frameset>
</html>
There's an HTA:APPLICATION tag that sets some properties to the file; it's good to have, but it isn't a must.
You NEED to place an application="yes" at the frames' tags. It says they belongs to the program too and should have access to all data (if you don't, the frames will still show the error you had before).
topo.htm
<html>
<head>
<title>Topo</title>
<script type="text/javascript">
function copia_url() {
campo.value = parent.conteudo.location;
}
</script>
</head>
<body style="background: lightBlue;" onload="copia_url()">
<input type="button" value="Copiar URL" onclick="copia_url()" />
<input type="text" size="120" id="campo" />
</body>
</html>
You should notice that I didn't used any getElement function to fetch the field; on HTA file, all elements that have an ID becomes instantly an object
I hope this help you, and others that get to this question. It solved my problem, that looks like to be the same as you have.
You can found more information here: http://www.irt.org/articles/js191/index.htm
Enjoy =]
I like your server side idea, even if my proposed implementation of it sounds a little bit ghetto.
You could set the .innerHTML of the iframe to the HTML contents you grab server side. Depending on how you grab this, you will have to pay attention to relative versus absolute paths.
Plus, depending on how the page you are grabbing interacts with other pages, this could totally not work (cookies being set for the page you are grabbing won't work across domains, maybe state is being tracked in Javascript... Lots of reasons this might not work.)
I don't believe that tracking the current state of the page you are trying to mirror is theoretically possible, but I'm not sure. The site could track all sorts of things server side, you won't have access to this state. Imagine the case where on a page load a variable is set to a random value server-side, how would you capture this state?
Do these ideas help with anything?
-Brian J. Stinar-
Does this help?
http://www.quirksmode.org/js/iframe.html
I only tested this in firefox, but if you have something like this:
<iframe name='myframe' id='myframe' src='http://www.google.com'></iframe>
You can get its address by using:
document.getElementById('myframe').src
Not sure if I understood your question correctly but anyways :)
You can use Ra-Ajax and have an iframe wrapped inside e.g. a Window control. Though in general terms I don't encourage people to use iframes (for anything)
Another alternative is to load the HTML on the server and send it directly into the Window as the content of a Label or something. Check out how this Ajax RSS parser is loading the RSS items in the source which can be downloaded here (Open Source - LGPL)
(Disclaimer; I work with Ra-Ajax...)
Ok, so in this application, there is an iframe in which the user is supplied with links or some capacity that allows that iframe to browse to some external site. You are then looking to capture the URL to which the user has browsed.
Something to keep in mind. Since the URL is to an external source, you will be limited in how much you can interact with this iframe via javascript (or an client side access for that matter), this is known as browser cross-domain security, as apparently you have discovered. There are clever work arounds, as presented here Cross-domain, cross-frame Javascript, although I do not think this work around applies in this case.
About all you can access is the location, as you need.
I would suggest making the code presented more resilitant and less error prone. Try browsing the web sometime with IE or FF configured to show javascript errors. You will be surprised just how many javascript errors are thrown, largely because there is a lot of error prone javascript out there, which just continues to proliferate.
This solution assumes that the iframe in question is the same "window" context where you are running the javascript. (Meaning, it is not embedded within another frame or iframe, in which case, the javascript code gets more involved, and you likely need to recursively search through the window hierarchy.)
<iframe name='frmExternal' id='frmExternal' src='http://www.stackoverflow.com'></frame>
<input type='text' id='txtUrl' />
<input type='button' id='btnGetUrl' value='Get URL' onclick='GetIFrameUrl();' />
<script language='javascript' type='text/javascript'>
function GetIFrameUrl()
{
if (!document.getElementById)
{
return;
}
var frm = document.getElementById("frmExternal");
var txt = document.getElementById("txtUrl");
if (frm == null || txt == null)
{
// not great user feedback but slightly better than obnoxious script errors
alert("There was a problem with this page, please refresh.");
return;
}
txt.value = frm.src;
}
</script>
Hope this helps.
You can access the src property of the iframe but that will only give you the initially loaded URL. If the user is navigating around in the iframe via you'll need to use an HTA to solve the security problem.
http://msdn.microsoft.com/en-us/library/ms536474(VS.85).aspx
Check out the link, using an HTA and setting the "application" property of an iframe will allow you to access the document.href property and parse out all of the information you want, including DOM elements and their values if you so choose.