Loading Different HTML Pages in a Main HTML Page using HTML5 Websockts - html

i have a situation where i want to load different webpages in a browser where the URL will be passed over the web-sockets.
Now the problem is, if inside one html page which is connected to the sockets server, it receives a command to redirect to another url, the socket connection is lost and it is not possible for the new page unless it has this socket functionality built in it.
One idea is to use a main page with inlineFrame where i keep changing the pages while main page remains connected to the socket server.
I want to know, is there more efficient way of doing this task where i am supposed to received url commands over the socket but idea is to avoid iFrames??

It sounds like your main page is acting like a web browser. It gets a new URL and then loads a real page based on that. You need something to maintain state and control which page is loading and the only way to maintain state with WebSockets is to keep that page open and the connection established.
The only solution I can see is the IFRAME one that you have suggested.

Great question!
I was thinking about this too.
To fix all the links do something on the server or client side
Loop this (code is sketchy, but its the right idea):
DOMObj = Your Data Object with page content
i=0
linkArray[i] = DOMObj.getElementsByTag('a').firstChild[i]
DOMObj.getElementsByTag('a').firstChild[i].href = "href='serverLoad(linkArray[i])'"

Related

Attachment of external content - forcing although X-Frame-Option=SAMEORIGIN

I read more in the Internet, but I didn't managed to find solution to this problem:
Is it possible to attach some external content in case of sending X-Frame-Option=SAMEORIGIN by server ?
I know that <iframe> can't be used, however maybe there exists some another way.
Thanks in advance
No, it's not possible to show another page's contents within your website if they are setting the HTTP header X-Frame-Options: SAMEORIGIN. That header says that the page can only be embedded on pages on the same domain name.
However, if you are running your own server-side application (i.e. using PHP, Node.js, etc), you can scrape the website on your server, and then display whatever info you needed from the other site that way. It will be more work this way, and you probably won't be able to perfectly replicate how everything appeared on the source site, but it's the only route you've got. I suggest googling "scraping" + the name of your server-side language/environment to learn how to do this.

Display video stream from LAN port inside HTML page

I am confronted with a very simple problem but I couldn't find any solution or piece of information through the internet.
I have a camera sending a video stream to an Ubuntu server (with fixed IP 192.168.1.100), through the port 8081, and I would like to "capture" this stream to display it inside a nice HTML page.
From inside my local network, I simply use the HTML iframe tag as follow and it works fine:
<iframe src="http://192.168.1.100:8081"></iframe>
However, here is the problem:
from outside my local network, my webpage is correctly accessible through my domain name but the iframe stays empty. I believe the reason is (correct me if I am wrong) that since the HTML code is executed in the browser, the address "http://192.168.1.100:8081" of the iframe tag doesn't point to my server anymore.
Therefore, the first thing I tired is to replace the previous iframe tag with the following one:
<iframe src="http://MY_DOMAIN_NAME:8081"></iframe>
However, this cannot work because I didn't forward the port 8081 of my router (and I cannot do it because otherwise everybody will be able to see my video stream without any access control).
Do someone have any idea about how to proceed ? More precisely, how can I access my video stream (embedded in an HTML page) from both, inside and outside my local network ?
Just to make sure I understand you, you want outside access to a LAN stream on your internal network, but don't want to open an external port on your router so that you can broadcast it out to the world, such that you would be able to view it from the outside.
You need to either have the stream saved as clips on your Ubuntu server and require a login to access from your server, externally, via a .php file makes the html document to allow viewing of recent clips of the stream; or, give up on viewing it externally from your network.
Cheers!

how to open https(X-Frame-Options) website in iframe or any html page

I've an app, which loads data from database. In a table I'm storing some URLs EX: https://facebook.com. Remember these URLs are dynamic and are controlled in admin panel.
Now, I need to get contents of these URLs and display it inside iFrame or inside a div within my app. Idea here is user should not go away from my app.
When I tried to load https://facebook.com it never loads because they've (X-Frame-Options) enabled.
Is there any solution for this?
You cannot tell the browser to ignore the security instructions provided by the third party site. That would defeat the object of having them in the first place.
If you want to display the content on your site, then you will have to display it from your own server (e.g. by using a server side process to read the data from the third party site and serve it from your own). Obviously, this will mean that you cannot (for example) load Facebook using the user's own credentials.

cache a part of web page using browser caching

I'm using yii framework in my web app.
I have huge size website Main Navigation Menu. It's a separate file named as Menu.html.
After some parsing using php it is rendered on the browser.
So the structure is something like:
{header}
{parsingMethod(menu.html)}
{middle content}
{footer}
So, on each hit the menu is parsed and rendered.
Is there a way that, once menu is loaded on client; it stored in browser cache. so that after consecutive hit it dose not load from server each time??
Although, I'm using Memcached to store menu.html so that application don't need to read menu.html file from disk each time. But I want to save this Memcached hit also once the menu is loaded on client.
Any help is greatly appreciated!
Thanks
Ashu
As far as I understand HTML5 appcache, there is no way to cache a certain part of a page. If you don't want to go through parsing and rendering the menu on each request, you can still make use of Yii's fragment caching.

How can a web page robustly switch to another page with client scripting?

I see in Javascript; Sending user to another page and how to change page from within javascript references to using the window.location to switch to a new page. It is also possible to have a similar result by including a meta tag http-equiv with a refresh value.
While these work as advertised, I need something that will continue to retry in the event the host application is not available at the time the client starts up.
A cross-browser solution would be particularly appreciated.
Update:
My current solution does as suggested. Initial AJAX to verify connectivity, followed by an update of the window.location. My concern is exactly the one given - the status can change between getting the response and updating the page reference.
I could update a lower level element body.innerHtml, for example, in the page body, but prefer to change the top level element to cleanly switch over to the new page.
The purpose of the initial page is just to bootstrap a long running application that similarly uses an AJAX loop to fetch updates of both content and periodic page refreshes. The intent is to be able to drop off web display panels and have them automatically configure themselves when they are eventually connected to a network.