I have this in document ready...
var fetchedInfo;
var url = 'https://example.com/page2';
$.get(url, function(response) {
fetchedInfo = $('#id').find('a').attr('href');
alert(fetchedInfo);
});
but on the alert I'm just getting 'undefined'.
The goal is to, from Page1, fetch a link from a div with a unique ID which is on Page2 of my site and use it for a Page1 function. Sessions wouldn't work because I can't navigate away from the page.
Any ideas?
You are trying to find the link in the current page itself in that code. Try parsing the response with jQuery like:
var fetchedInfo;
$.get("https://example.com/page2", function(res) {
fetchedInfo = $(res).find("div#id a").attr("href");
alert(fetchedInfo);
});
This can be done without using jquery
<!--we can load the page in an iframe, then get the html out of it-->
<iframe id="target" src="https://example.com" ></iframe>
<script>
//this gets the html from the iframe
var targetHTML = document.getElementById('target').contentWindow;
//this gets the element from the html
var targetTag = targetHTML.document.getElementsByTagName('h1')[0].innerHTML;
alert(targetTag);
</script>
Related
I have a blank page with an iframe that displays a form from an external domain outside my control. I'm trying to write a bit of Javascript/jQuery that will close the window after the form is submitted.
Here's my code:
<body>
<script>
$('iframe input[type="submit"]').on('click', function () {
window.close();
});
</script>
<iframe src="SomeOtherDomain.com"></iframe>
</body>
Nothing happens when I click the button though. What am I doing wrong?
EDIT:
I'm not sure if it makes a difference or not but it looks like the iframe calls a second iframe... I've got an iframe inside an iframe.
I believe you need to provide some time(100 ms) to submit the form data. Please try this by calling the deleteIframeTimer
function deleteIframeTimer(){
var t = setTimeout("deleteIframe()", 100);
}
function deleteIframe() {
var iframe = parent.document.getElementById("myframe");
iframe.parentNode.removeChild(iframe);
}
So long as your iframe src is from the same domain this will work:
$(document).ready(function () {
var f = $('#myframe')[0];
var win = f.contentWindow;
//Created test environment in IFrame with ID "myframe"
$(win.document.body).append('<form><input type="submit" value="click me"/></form>');
$(win.document).on('submit', function () {
setTimeout(function () { $(f).remove(); }, 1000)
});
});
Simply remove the element but remember you can't get the contentDocument from an iframe that is not of the same domain.
Working solution:
https://jsfiddle.net/f3eayurw/
I've looked at
Insert content into iFrame and their fiddle at http://jsfiddle.net/8VP4y/3/ to come out with the following codes which i'm having problem.
i've created a jsfiddle for my problem below.
https://jsfiddle.net/cy87j70t/2/
$( document ).ready(function() {
$('#card2').html( '<iframe id="myFrame"></iframe>' );
var myFrame = $("#myFrame").contents().find('body');
var myFrame2 = $("#myFrame2").contents().find('body');
myFrame.append('<p>OH NO TOKEN IS FOR myFrame Original ');
myFrame2.append('<p>OH NO TOKEN IS FOR myFrame 2 ');
});
AND the HTML looks like this;
<div id='card2'>
</div>
<iframe id='myFrame2'>
</iframe>
I'm trying to create a iframe using javascript, then writing to the iframe with content from JSONP (i've ommitted that part for easy debug);
I'm not sure why it's not writing to the iframe, is it because the iframe is created by javascript?
I've tried append, html, after, prepend but nothing seems to allow me to write to the iframe
No, it's not a bug.
Updated jsfiddle
The right way is:
$(function () {
$('#card2').html('<iframe id="myFrame"></iframe>');
// add the src attribute so that the load event will take place in every browser..
$("#myFrame").attr('src', 'about:blank');
// wait for the iframe is loaded
$("#myFrame").on('load', function(e) {
var myFrame = $("#myFrame").contents().find('body');
myFrame.append('<p>11111111OH NO TOKEN IS FOR myFrame Original</p>');
});
var myFrame2 = $("#myFrame2").contents().find('body');
myFrame2.append('<p>2222222222 OH NO TOKEN IS FOR myFrame 2</p>');
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id='card2'>
</div>
<iframe id='myFrame2'>
</iframe>
I load a pdf that the user clicks on via a URL call. See the following javascript:
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
document.location = "/archives/entry/" + $(this).attr("data-entry-id");
}
);
I want to change the browser title of the pdf that comes up, so that it is not just the url. Adding document.title("New Title") to the function block does not work because it is not synchronized with the server returning the file that's being displayed in the browser. How can I overcome this?
Perhaps I could open a new page (rather than changing the document location) that wraps the URL call in html so that I can set the title - something like this:
<html>
<head>
<title>New Title</title>
</head>
<body>
<iframe src="/archives/entry/98"></iframe>
</body>
</html>
And that way, I could set the title. How can I write this html to a new page from within the javascript function block I have that responds to a click? Thanks in advance.
Instead of changing location you can load data by ajax.
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
var title = $(this).text();
var url = "/archives/entry/" + $(this).attr("data-entry-id");
document.body.innerHTML = "<p>Loading...</p>"; // Or a loading image
$.ajax(url).done(function(data){
$(document.body).html(data);
document.title = title;
})
}
);
If you set a title in the PDF document you can make it display as your browser title.
Follow these instructions:
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html
A jQuery approach, relatively easy to modify for plain JavaScript:
$('body').html('<iframe src="/archives/entry/98">');
document.title = "New Title";
I want to access the currently loaded document of an iframe and link that document to another iframe, for this I tried:
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again. I want to access the document already loaded in #if1. How can I do this?
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again.
Err, yeah, that's what you are doing: you are setting if1's src to if2's src. That's why it reloads the iFrame... If you exchange if1 and if2 in your code it might do what you're trying to do -- if I managed to understand you.
Check out this running demo: http://jsfiddle.net/aymansafadi/BanTV/5/show/
The key part you might be interested is:
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1')[0].contentWindow.location.href = iframe2;
$('#if2')[0].contentWindow.location.href = iframe1;
});
NOTE: This, and anything else you you try, will only work if both iframes are under the same domain as the parent window.
You can also use .src('attr') to set the URL, but not get the current URL.Demo: http://jsfiddle.net/aymansafadi/BanTV/7/show/
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1').attr('src', iframe2);
$('#if2').attr('src', iframe1);
});
I have an HTML page that opens an IFRAME ... But at some point, after some user interactions with the IFRAME, it should close itself. I've tried various commands such as:
var fram = $("IFRAME_NAME");
fram.parentNode.removeChild(fram);
this.remove();
this.style.display='none';
var frame = parent.frames['IFRAME_NAME'];
frame.remove();
frame.html("");
document.IFRAME_NAME.document.body.innerHTML = '';
Thanks.
Considering markup like this:
<iframe id="myframe" />
The following jQuery code will remove it in the host page:
$("#myframe").remove();
To close the iframe from within iframe itself, define the function in the host page:
function closeFrame() {
$("#myframe").remove();
}
Then in the code running in the iframe, call:
parent.closeFrame();
If you are using jQuery (and I've understood your question properly), you can use a code as simple as:
<iframe src="http://www.google.com" id="testframe"></iframe>
<script>
$(document).ready(function() {
setTimeout(function () {
$('#testframe').remove();
},5000);
});
</script>
http://jsfiddle.net/pYHx5/