The below code not proper working as i wants, Anyone knowns about this issue why it happening. i want open external website on our website body div .
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
jQuery 3.1.1
<style >
#content{height:250;width:500px;}
#content object{height:100%;width:100%;}
</style>
<script >$(document).ready(function(){
$('a').on("click", function(){
event.preventDefault();
// Load External pages.
$("#content").html('<object data="'+this.getAttribute('href')+'" />');
});
});</script>
```Html Code```
Google
<div id="content"></div>
</body>
</html>
Do you want to use iframes?
The HTML Inline Frame element "iframe" represents a nested browsing context, embedding another HTML page into the current one.
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
Not every site can be loaded in a frame if they are not on the same origin, for example in your case google.com sets X-Frame-Options (a header) as sameorigin.
There's no way to bypass it unless you are making this for a chrome extension where you'd have to modify the response to remove X-Frame-Options header and everything would work fine.
You could read more about X-Frame-Options, from here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
If you want to know about how to remove X-Frame-Options if you are making a chrome extension, Getting around X-Frame-Options DENY in a Chrome extension?
Related
I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?
I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server
Here is my IE-specific question:
How can I prevent that my iFrame is shown in the compatibility mode from its parent HTML-Page?
I want to find a JavaScript solution for this problem.
Here is my structure:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=IE7" />
</head>
<body>
<iframe id='frameMain' src='http://example.com' />
</body>
</html>
the iFrame frameMain will also be displayed in the Compatible-Mode (IE=IE7), but I don't want this!
Does anyone of you know JavaScript (or any other trick) to show the iFrame in IE=edge?
please help me!
greetz Klaus
I have a code like this:-
<html>
<head>
<title>Test Page</title>
</head>
<body>
ABC
<iframe name="iframe"></iframe>
</body>
</html>
I want this functionality:-
If there is an error in loading the page if IFrame, than it change the IFrame source to other url. I want this for both Firefox and IE using javascript
When i try to use the following code to load facebook or you youtube into iframe tags nothing is happened. page isn't loaded into iframe tag
this problem occurs with multiple sites such as youtube, stackoverflow and facebook
code:
<head>
<title>HTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Below is an iframe.</p>
<iframe src="http://www.youtube.com/" width="400" height="150">
<p>iframes are not supported by your browser.</p>
</iframe>
</body>
</html>
any help please
I tried it
http://jsfiddle.net/KPk6n/1
And looking at the console, I get
Display forbidden by X-Frame-Options
So I think those sites disallow framing, there probably is a workaround to this, but I'd say you should respect them and not frame them
The sites you speak of probably disable access from iFrames.
My site works just fine in this example: http://jsfiddle.net/3vxvm/