When you browse facebook and click a link on it for example (a friend profile, the home button etc) all the page get refreshed but not the chat.
How can you tell the browser to reload the page but don't reload a part of it?
You might want to check out this document. Basically, HTML5 introduced a feature (history.pushState(), history.replaceState() and window.onpopstate) that allows you to change the URL displayed in the address bar without actually reloading the page.
Here's what facebook actually seems to do:
On browsers that support it, they use history.pushState (i've tested up-to-date chrome and firefox)
On IE (which doesn't support pushState), and I'm guessing on other browsers too, they don't change the url at all - they use hash tags. There's a javascript handler on the click event which replaces the href from facebook.com/events to facebook.com/?sfrm=1#!/events/ (or similar)
Could be with AJAX behaviors or with something like :
<body>
<iframe src="content.php" id="content_frame">
<p>Browser does not support iframes.</p>
</iframe>
<iframe src="chat.php" id="chat_frame">
<p>Browser does not support iframes.</p>
</iframe>
</body>
Related
I have an Iframe and I want a javascript function to run, If the iframe changes location with a window.location / window.open
I tried this, but its not working :/
<iframe src="http://www.example.com/" onload="myFunction()" id="iframe"> </iframe>
<p>If this iframe ^^^^ changes location on a window.location/ window.open, I want the alert to go off</p>
<script>
function myFunction() {
alert(document.getElementById('iframe').src)
}
</script>
function myFunction() {
alert(document.getElementById('iframe').src)
}
<iframe src="http://www.example.com/" onload="myFunction()" id="iframe"></iframe>
<p>If this iframe ^^^^ changes location on a window.location/ window.open, I want the alert to go off</p>
You can access an iframe's current URL with .documentWindow.location.href in Firefox or .contentDocument.location.href in Chrome. With .src you will always get the last programmatically changed URL, either with the src HTML attribute or via JavaScript.
Having said all that, you cannot access anything below documentWindow or contentDocument if the domain of the URL in the iframe differs from the domain of the website executing the JavaScript code.
That is for normal browsers. You can give Electron a try if you really need to do it. Basically, with electron you can build your own browser with no security restrictions. But only you will use it, not the visitors of your website, and it is not straightforward.
I use Pdf.js, I get base64 file from web service (this.attachmentSource), and when I want to add var iframe = "<iframe width=800 height=550 src='" + this.attachmentSource + "' > </iframe>",For some pdfs in google chrome I get iframe empty, but in Mozila everything work fine, who can explain this mystery?
I tracked down the issue
The iframe is being block by chrome detecting insecure content and blocking the iframe from loading. this only occurs when using Chrome, IE Firefox, Safari on PC work fine.
Safari and Chrome also work fine on the iPad. It appears Chrome on PC has a different set of rules and blocks the content. Selecting the shield in the URL title bar allows the content to be displayed. Pressing Ctrl shift J gives some information about what content is being blocked.
wouldn't it be nice if all the browser followed the one set of rules
I happened to notice: server Response Header:
x-frame-options: DENY
The DENY option is the most secure, preventing any use of the current page in a frame. More commonly, SAMEORIGIN is used.
I was using AWS CloudFront with a Lambda#Edge function already, so I found a solution here: Configuring X-Frame-Options Response Header on AWS CloudFront and S3
If you are using a different server stack, you will have to adjust your server response headers accordingly.
iFrame doesn't support most of the things. For ex: if you have graphs in your application it won't be displayed.Use embed or object instead.
<object data="{{srcUrlTrusted}}" width="100%" height="800">
<embed ng-src="{{srcUrlTrusted}}" width="100%" height="800"> </embed>
</object>
I was having the same issue when trying to embed a PDF. I tried both an <iframe> and <embed> approach, but they still wouldn't open in Chrome.
The solution for me was opening the PDF in Adobe Acrobat and under the "Protect" tab, select "Remove Hidden Information".
I didn't create this PDF, so I am not sure which policy, etc was causing the issue.
Hope this helps!
If you use an iFrame element in an HTML document, the child page will load with all of the session and cookie data from the browser.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stack Overflow in an iFrame</title>
</head>
<body>
<h1>Stack Overflow in an iFrame</h1>
<iframe src="http://stackoverflow.com" width="640" height="480" />
</body>
</html>
Ignore for a moment that SO doesn't actually allow itself to be loaded in an iFrame. If it did, the SO page loaded by the iFrame would show you as signed in.
How can I use an iFrame without any cookies or session data? (like incognito mode in Chrome)
Why?
My company sells a product (web-app) for people to build customized websites with. When they are authenticated, and they visit their website, we show them the auth'ed version of the UI so that they can edit the content. Un-auth'ed users only see the static website. Using multiple browsers or clearing cookies is not a reasonable expectation of our users so we want to show a preview of their site to them in an iFrame so they can see what their visitors would see. We also want to show "mobile" previews of the site with smaller resolution iFrames so that they may see what their visitors would see if they came to the website on a phone. These iFrame(s) need to be loaded without access to the browser's cookies or session data so that they load in un-auth'ed mode, just like Chrome does in incognito mode.
I haven't tried anything yet because I don't know where to start. I did find out that HTML5 added some sandbox attribute values to the iFrame element, but none of them seem to help with this problem. Maybe something could be done with JavaScript, we do already use jQuery in our project.
Note: We aim to only use valid HTML5
If you fully control the webstack wouldn't it be easier to add a preview parameter that treats the user as unauthenticated?
For instance:
<iframe src="http://stackoverflow.com?preview=1" width="640" height="480" />
Followed by bypassing your authorization checks if the preview flag exists.
I'm writing a firefox extension to read out the privacy settings of a facebook user. (not a facebook app!!) To switch between different websites of facebook I used iframes, but this isn't working anymore. I have this problem since 2 weeks.
$('#globalContainer').append('<iframe id="reusable_iframe" src="" width="90%"
height="400" name="reusable_iframe"></iframe>');
//....
$('#reusable_iframe').attr('src', link);
I'm follow the Same origin policy and it was working just fine since a 2 weeks!? an example:
var link = "http://www.facebook.com/editprofile.php?sk=basic";
Now I just get a blank iframe :(
the funny thing is, that if I add "http://www.youtube.com/embed/Qi_AAqi0RZM" or "http://trololololololololololo.com/" to the iframe it's working without a problem... :/
did facebook change the rules for own links in iframes? Is there a workaround? Is there an other way for me to scan different sites with firefox-extensions? i would prefer to stay with content-scripts....
Edit: This is how it looks at firebugs... also funny is that the facebook page http://www.facebook.com/undefined is working however!?
<iframe id="areusable_iframe" width="90%" height="400" name="areusable_iframe" src="http://www.facebook.com/">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
Facebook sends the following response header to the browser:
X-Frame-Options: DENY
This cause all major browsers (even IE8 and higher) to prevent showing it inside frames.
The old way was "frame buster" using JavaScript forcing the page to open as the top window, but it's very unfriendly so it was replaced by this header in most modern websites that don't want to be displayed in frames.
Not much you can do though, sorry.
The "undefined" page is just blank content which is their 404 custom error page as it does not contain the above header, it can be displayed inside frame.
To learn more about the X-Frame-Options header see this documentation.
Before you relink me, I've read questions like How do I stop a page from unloading (navigating away) in JS?, but they deal with HTML4 and below. I want an answer that utilizes the HTML5 event attribute onunload. I also want this to be as pure as possible, that is without external libraries or plugins like jQuery or Flash and only using standardized code (PURE HTML, CSS, and JavaScript, nothing platform-dependant).
Before you tell me to use onbeforeunload, note that it is NON-STANDARD, and therefore does not fit my criteria as described above. It does NOT work on all browsers, especially those made before IE implemented it.
Question
On my site, I have several music players, and if any one of them is playing when the user attempts to navigate away from the page, I want to popup a dialog box ensuring that they intended this and that they understand that this will stop the audio stream, and if they choose "yes" or "OK", it proceeds with the navigation, but if they click "no" or "Cancel", it stays on the same page and keeps playing the audio without a break. How do I use JavaScript to cancel the page unloading WITHOUT USING ONBEFOREUNLOAD?
Code so far
I have the following code so far, but no idea how to stop unloading:
<!DOCTYPE HTML><html>
<head>
<script><!-- Loading Scripts -->
function unloadTasks(){
window.alert(":" + playing + ":");
if (playing && !window.confirm("A podcast is playing, and navigating away from this page will stop that. Are you sure you want to go?"))
window.alert("Here is where I will stop the page from unloading... somehow");
}
</script>
<script><!-- Player Scripts -->
var playing = false;
function logPlay(){
playing = isPlaying("e1audPlayer");
}
function isPlaying(player){
return document.getElementById(player).currentTime > 0 && !document.getElementById(player).paused && !document.getElementById(player).ended;
}
</script>
</head>
<body onunload="unloadTasks()">
<audio id="e1audPlayer" style="width:100%;" controls="controls" preload="auto" onplaying="logPlay()" onpause="logPlay()">
<source src="http://s.supuhstar.operaunite.com/s/content/pod/ADHD Episode 001.mp3" type="audio/mpeg"/>
<source src="http://s.supuhstar.operaunite.com/s/content/pod/ADHD Episode 001.ogg" type="audio/ogg"/>
Your browser does not support embedded audio players. Try Opera or Chrome
</audio>
Link away
</body>
</html>
Working example
You should be using onbeforeunload to prompt the user with the message.
You can not prevent this entirely, however can notify the user via a popup that he should not reload. This is done with the onbeforeunload window event, best documented at MDN.
This will behave exactly like here on Stackoverflow, if you add some text to the answer textarea and than try to leave the page.