<style>
.address_bar
{
width:1100px;
color:#333333;
font-family:Verdana, Geneva, sans-serif;
}
\#browser
{
width:90%;
}
</style>
<script language="javascript" type="text/javascript">
function go_to_page()
{
var url = document.getElementById("address").value;
//window.open(url,"browser");
document.getElementById("browser").src = url;
}
</script>
<body>
<div>
<div style="float:left;">
<input type="text" name="address" id="address" class="address_bar" value="http://"/>
</div>
<div style="float:left;">
<input type="button" name="go" id="go" value="Go >> " onclick="go_to_page()"/>
</div>
<div>
<iframe name="browser" id="browser" style="height:750px;">
</iframe>
</div>
</div>
</body>
In above example if I want to open
1. http://mail.yahoo.com
2. http://www.gmail.com
then It automatically removes the iframe. what I do? I want every site is open in same iframe.
These sites have what is called a frame breakout, to prevent them being loaded in a frame. There are some scripts to disable frame breakout, with varying results.
Of course, loading 3rd party sites in an frame within your own website is kind of stealing, and profiting of their success, but I trust that you just want a way to check both of your e-mail accounts.
You can't. For security reasons, these websites won't load if they "know" they are in an iframe.
Related
I have an adobe sign form that is opening in an iframe. On click of a button with class name "agree-to-terms" inside" the adobe sign form I want to change the behavior of "Submit" button which is on the webpage.
So basically I have 2 radio buttons and submit button(which is initially diabled) on the webpage. On selection of "yes" radio button the iframe is opening which has adobe sign form embedded in it. I want to enable the submit button on click of a button with classname "agree-to-terms" on adobe sign form.
Here is what i have tried
function ideaform() {
document.getElementById("myiframe").src = "adobe sign url";
$("#myiframe_forms").show();
$("#myfetching_form").show();
$('#idea_sbmt').css({
'background-color': '#0071ce',
'pointer-events': 'auto',
'border': '1px solid #0071ce',
'color': 'white'
});
setTimeout(function() {
$("#myfetching_form").hide();
}, 3000);
//I tried both the ways
1) $("#myiframe").load(function() {
$("#myiframe").contents().on("click", ".agree-to-terms", function() {
console.log("inside frame loaddddd")
});
});
2) $(document).ready(function() {
console.log("insideeeeeeee frameee")
$("#myiframe").contents(".agree-to-terms").click((functionToRun));
});
function functionToRun() {
console.log("alllllllllleeerrrrrrtttttttt")
}
<div id="submit-cont" style="display: flex; justify-content: space-between;">
<div>
<input type="radio" id="yes" name="yesno" value="yes" onchange="ideaform()">
<label for="yes">I understand. Take me to the agreement to review and sign if I
agree.</label><br><br>
<input type="radio" id="no" name="yesno" value="no" onchange="noideaform()">
<label for="no">No thank you. Let me think about it some more.</label><br>
</div>
<div>
<button id="idea_sbmt" onclick="showIdeaSubmission()">Submit</button>
</div>
</div>
<div id="myiframe_forms">
<div class="banner">
<div id="myDiv" class="img-wrapper">
<p class="close_button" onclick="dismiss_iframe_forms()"><b>Close</b></p>
<h1 id="myfetching_form" style="margin-top: 150px; color:#0071ce;"><b>Fetching your form...</b>
</h1>
<iframe id="myiframe" src=""></iframe>
</div>
</div>
</div>
You cannot access the iframe DOM if the content is from a different domain (cross-domain access).
There is only limited information available when the user interacts with the iframe. For example, here you can see how to detect a click on the iframe (without knowing exactly where the user clicked): https://jsfiddle.net/oqjgzsm0/
var monitor = setInterval(function(){
var elem = document.activeElement;
if(elem && elem.tagName == 'IFRAME'){
message.innerHTML = 'Clicked';
clearInterval(monitor);
}
}, 100);
Also read: Detect Click into Iframe using JavaScript
this is actually a follow up question to this question
that was solved thanks to Rory McCrossan.
I now have this functioning script; a search function that shows a div depending on a searchword.
JS
$('#search').click(function() {
var txt = $('#search-criteria').val();
if (txt)
$('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});
CSS
.fruit {
display: none;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
<h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
<h3>Some text about oranges</h3>
</div>
What I now wonder is if someone could help me with some kind of error handling to add to this script, preferably that can be smoothly added without rewriting the logic of the script. I.e. I'd like to display another div with a message when the search comes up with no result and/or when the user makes an empty string search.
Since I'm actually an UX designer my technical skills are somewhat limited and I'm therefore very grateful if someone could help me with this...
Thanks in advance!
simple javascipt error handing using try and catch:--
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function adddlert2($a){
alert($a);
}
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
You can use try and catch in this case, but If you want to be informed about all irregularities in your application I prefer to use dedicated services for this job.
I use Sentry.io, this is nice service to handle exceptions and errors in backend and frontend. Is simple to use, you only need to add one additional JS script without modifying existing code. More about installation process here
I guess what you're looking for is this :) I know changing to .keyup() had nothing to do with your question, so change it back if you like
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div id="default" class="fruit">
no fruit found
</div>
<div class="fruit" id="apple">
<h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
<h3>Some text about oranges</h3>
</div>
and
<script>
$(document).ready(function(){
$('#search-criteria').keyup(function() {
var txt = $('#search-criteria').val();
if (txt){
var elements = $('.fruit').hide().filter('#' + txt.toLowerCase());
if(elements.length > 0){
elements.show();
}
else{
$("#default").html("No result found for "+txt);
$("#default").show();
setTimeout(function(){
$("#default").hide();
}, 1000);
}
}
});
});
</script>
Another error handing(javascript example) using javascript SEARCH function:--
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
try {
var str_wrong = "Visit";
var n = str.search("Visit");
document.getElementById("demo").innerHTML = n;
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
I've created a simple script that randomly opens sites from a list. I've recently tried to add a feature that enables users to choose the wait (in milliseconds) between the open and close of each page. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Smokescreen</title>
</head>
<body align="center" style="font-family:monospace">
<h2 align="center" style="font-family:monospace">
SmokeScreen
</h2>
<h3 align="center" style="font-family:monospace">
SmokeScreen is a JavaScript program that opens a random site every 3 seconds,
</h3>
<h3 align="center" style="font-family:monospace">
to create a "smokescreen" over your browser history, preventing anyone from [easily] finding your information.
</h3>
<h4 align="center" style="font-family:monospace">To exit, close the original window that has the text "Smokescreen" in the title.</h4>
<p align="center" style="font-family:monospace">
Source Code / Learn More
<br />
<div style="width: 300px; border: 25px solid #800000; margin:0 auto; font-family:monospace;" align="center">
<h4 align="center" style="font-family:monospace">Milliseconds to wait before closing page:</h4>
<h4 id="one" align="center" style="font-family:monospace"></h4>
<button onclick="millisecs = prompt('New time to wait (in milliseconds)?'); if ( isNaN(milliseconds) ) {millisecs = millisecsBackup} else {millisecsBackup = millisecs} document.getElementById('one').innerHTML = millisecs;" style="font-family:monospace" align="center">Set Wait Time</button>
<br />
<br />
</div>
<br />
<div style="margin:0 auto; font-family:monospace" align="center">
<button onclick="getRandom(0, list.length, millisecs);" style="font-family:monospace" align="center">Start!</button>
</div>
</p>
<script src="script.js"></script>
<script>
var millisecs = 3000;
var millisecsBackup = 3000;
document.getElementById("one").innerHTML = millisecs;
</script>
</body>
</html>
For some reason, the text in the h4 with the id of one isn't updating when I type in different numbers. What am I doing incorrectly?
You're checking if (isNaN(milliseconds)) but you called your variable millisecs so it is throwing an error.
If you're using a modern browser, try opening the developer tools (F12 on windows / CMD+OPT+i on mac) and checking the console.
Also please look into moving your inline styles / onclicks to <style> and <script> tags :)
I made a little web-based web browser for a web-based OS I made. I noticed that in some sites, they have links that like to open in new tabs. Is there a way that this can be prevented and have the links open in the iframe instead?
Here's my code for the whole browser just in case:
<html>
<head>
<link href="./browser.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</head>
<body>
<div id="help">
<form action="help.html"><input type="submit" value="Help"></form>
</div>
Address:
<div id="logo">
<img src="stallion.png">
</div>
<input type="text" style="width: 400px;" name="url" id="url">
<input type="button" value="Go" id="load">
<div>
<input type="image" src="back.png" height=25 width=25 onclick="back()">
<input type="image" src="forward.png" height=25 width=25 onclick="forward()">
<input type="image" src="refresh.png" height=26 width=26 onclick="refresh()">
</div>
<iframe frameborder=0 class="netframe" src="http://www.bing.com/" id="main_frame"></iframe>
</body>
<script>
function back()
{
window.history.back();
}
</script>
<script>
function forward()
{
window.history.forward();
}
</script>
<script>
function refresh()
{
var iframe = document.getElementById('main_frame');
iframe.src = iframe.src;
}
</script>
</html>
There is two choices
1 : You can check all of the html in the iframe on each change and look for "target=_blank" and if so replace with "target=_self"
2 : Which I think would be the better way is, when the user clicks on an anchor tag check to see if the anchor has the attribute "target=_blank" if they do, simply remove it and then click the link.
I have provided a jsFiddle below
https://jsfiddle.net/L5dhp80e/
Html
<a class="newTab" href="http://www.google.com" target="_blank">
New Tab Google
</a>
<br />
<a class="removeBlank" href="http://www.google.com" target="_blank">
Removed Target Blank Google
</a>
Javascript
$(function () {
$('a.removeBlank').on('click', function () {
if ($(this).attr('target') == "_blank") {
$(this).attr('target', '_self');
}
$(this).click();
return false;
})
});
However if the iframe content is cross domain I don't think you can edit any of the code at all.
Get DOM content of cross-domain iframe
I found this answer in the web:
window.open = function (url, name, features, replace) {
document.getElementById('#iframe').src = url;
}
or with jQuery:
window.open = function (url, name, features, replace) {
$('#iframe').attr('src', url);
}
I haven't already tested it, but i hope it works.
Add target="_self"
<iframe src="http://google.com" target="_self"></iframe>
Target Attributes are:
_self = Opens the linked document in the same frame as it was clicked (this is default)
_blank = Opens the linked document in a new window or tab
_parent = Opens the linked document in the parent frame
_top = Opens the linked document in the full body of the window
framename = Opens the linked document in a named frame
Information from:
http://www.w3schools.com/tags/att_a_target.asp
I'm writing a theme and wanted to display content only to the admin of the blog, but I don't know how to detect if the admin is logged in.
I did notice that at the bottom of the HTML, right before the closing body tag there is this code:
<iframe src="http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fstaff.tumblr.com%2F&lang=en_US&name=staff" scrolling="no" width="330" height="25" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe>
<!--[if IE]>
<script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script>
<![endif]-->
<script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript><img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/></noscript>
The URL in the iframe (http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fstaff.tumblr.com%2F&lang=en_US&name=staff) leads to a page which does its own check if the user is logged in. I just haven't been able to figure out how it works.
Because this check would need to be embedded in the theme's code it must be in JavaScript.
Thanks, Spencer
I think problem cannot be solved because this check must be made on server, and check can't be made due to limitations of Tumblr Theme engine.
UPDATE: return to JS version
List of iframes:
Tumblr iframe for non-logged user
Tumblr iframe for logged users [owner]
Tumblr iframe for logged users [non-owner]
Different block of code from these iframes:
Tumblr iframe for non-logged users:
<script type="text/javascript">
var logged_in = (document.cookie.indexOf('logged_in=1') != -1);
</script>
…
<div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">
<span id="logged_out_controls" style="display:none;">
<a href="https://www.tumblr.com/register" target="_top" id="follow_link">
<img id="follow_image" alt="Follow" style="width:58px;"/>
</a>
<a href="https://www.tumblr.com/register/join_tumblr" target="_blank"
id="join_link">
<img id="join_image" alt="Join Tumblr" style="width:105px;"/>
</a>
</span>
</div>
Tumblr iframe for logged users [owner]:
<div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">
<a target="_top" href="http://www.tumblr.com/customize?redirect_to=http%3A%2F%2Fexample.com%2F">
<img src="http://assets.tumblr.com/images/iframe_customize_alpha.png?1016" alt="Customize" style="height:20px;width:80px; border-width:0px; display:block; float:left; cursor:pointer;" />
</a>
<a target="_top" href="http://www.tumblr.com/dashboard">
<img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?1016" alt="Dashboard" style="height:20px; width:81px; border-width:0px; display:block; float:left; cursor:pointer;" />
</a>
</div>
Tumblr iframe for logged users [non-owner]:
<div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">
<form action="/follow" method="post" style="display:block; float:left;"onsubmit="_gaq.push(['_trackEvent', 'Iframe', 'Follow', 'example-com');">
<input type="hidden" name="form_key" value="83jbGySgEVpQGOoZALqqoSaKfjs"/>
<input type="hidden" name="id" value="example-com"/>
<input type="image" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?1016"style="width:58px; height:20px; border-width:0px; display:block;margin-left:3px; cursor:pointer;"alt="Follow"/>
</form>
<a target="_top" href="http://www.tumblr.com/dashboard">
<imgsrc="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?1016" alt="Dashboard" style="height:20px; width:81px; border-width:0px; display:block; float:left; cursor:pointer;"/>
</a>
</div>
Diffs which can be detected:
Iframe for non-logged has strange script line:
var logged_in = (document.cookie.indexOf('logged_in=1') != -1);
There is NO link with href attribute contains 'customize' pattern (CSS way: a[href*='customize']);
There is NO link with href attribute contains 'dashboard' pattern (CSS way: a[href*='dashboard']);
Iframe for logged users [owner]:
There is link with href attribute contains 'dashboard' pattern (CSS way: a[href*='dashboard']);
There is link with href attribute contains 'customize' pattern (CSS way: a[href*='customize']);
There is NO 'follow' form;
Iframe for logged users [non-owner]:
There is link with href attribute contains 'dashboard' pattern (CSS way: a[href*='dashboard']);
There is 'follow' form;
There is NO link with href attribute contains 'customize' pattern (CSS way: a[href*='customize']);
Conclusion
However I find this solution quite fragile, I think it is possible to detect is user owner of current blog based on diffs listed above.