I'm working on a website which requires the user to sign in on a 3rd party website that's displayed on my website within an iframe. I'm trying to extract the html code of that website with jQuery but it doesn't really work. Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Iframe</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log($("#iframe").contents().find("body"));
});
</script>
</head>
<body>
<iframe src="https://www.google.com"></iframe>
</body>
</html>
I'm using google in my example but it's a different website I use. The result I'm getting is this - w.fn.init [prevObject: w.fn.init(0)] - but I can't find the html. Anyone who knows how to do this?
Imagine your site being able to access the content of any iframe you're including. You could simply include websites like facebook, gmail or any banking site where a user is logged in and then steal their personal information. So this is strictly forbidden by default: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
There is an "opt-in" technique, though, where the communication between parent window and iframe is possible. Basically each site/document defines the information to be transmitted and sends it using the window.postMessage() method: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
So if a message is sent from one party
window.postMessage("hello!", "http://example.com");
it may be received by the other one
window.addEventListener("message", function(e) {
console.log(e.data); // prints "hello!"
}, false);
Related
I would like to give a page transition.
In web server (Google side), I prepare an html file like this,
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<h1>Moving</h1>
</head>
<body>
link
<script> window.location.href='https://google.com'</script>
</body>
</html>
Note that using the link link, I can jump to the google page (google.com).
However I got a console message like below and cannot jump automatically with Javascript...
Refused to display 'https://google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I think this is a limitation in Google Apps Script..
Is there anyway to let users jump without clicking the link?
You were able to do it with window.top.location.href.
However, it seems it has been just blocked by Chrome CORS since this month.
I need to load some data on each login, but this php script take some time to run and I don't want users to wait for a minute on blank screen.
I would like to trigger data loading process and redirect user to home as a normal login.
I cannot use exec because restrictions of hosting provider, so I am trying to use ajax for execute background.php and javascript for redirect. (windows.location)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> </script>
</head>
<body>
<script>
$(function ()
{
$.ajax({
url: 'http://myweb.com/background.php'
});
});
window.location="http://myweb.com";
</script>
</body>
if I comment windows.location line, then background.php script finish ok, but on any kind of redirection (header location in php, windows location in javascript), script does not execute.
I need to redirect to home (or any other part of my web site) without interrupting background.php execution.
¿Any idea?
I want to redirect a plain HTML web page to a new URL, but everything I have tried (meta refresh, Javascript redirect) results in the old URL appearing in the address bar of the new page, even after clearing my browser cache. .htaccess redirects sometimes work but are complicated by the fact that the old page is already the target of a redirect from another domain. I do not have access to the hosting account.
Can anybody suggest a way to make the new URL always appear on the address bar for the new page? Thanks a lot.
Using the meta refresh tag should work fine.
<meta http-equiv="refresh" content="0; url=http://example.com/" />
Note: Place it in the head section.
You may also want to do a javascript redirect as the W3C doesn't recommend the meta tag approach, although it may not work on all mobile browsers. Along with a fallback text link, that would make your page similar to:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1; url=http://example.com">
<script type="text/javascript">
window.location.href = "http://example.com"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
</body>
</html>
Many thanks to the answers from this previous answer: Redirect from an HTML page
I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/
I am trying to use Google Chrome Frame in my Django app.
Inserting <meta http-equiv="X-UA-Compatible" content="chrome=1"> into the header doesn't do the trick.
Right now, this is what my header looks like:
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Amuse Me</title>
<link href='/static/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="/static/jquery-1.6.0.min.js"></script>
<script type="text/javascript" src="/static/base.js"></script>
</head>
Any suggestions?
Your page might be cached as suggested in quirksblog:
Cache
When I was doing research I used one
test page and constantly changed the
tags in the . The problem
was that IE/Frame seemed to be caching
not only the page, but also in which
rendering engine it should be shown.
Therefore a simple page refresh won’t
help you here.
Fortunately Twitter user jdalton came
up with a solution: simply append a
pseudo-query such as ?123 to the page
URL. That bypasses the cache and
forces the browser to re-evaluate the
tags.
Open your code in Google Chrome's developer tools and look for html errors, and check your resource headers.