I am attempting to create some functionality which will get and set the document of an iframe. I have been unsucessful at performing this with jquery.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script></head>
<body>
<iframe sandbox="allow-same-origin allow-scripts" id='a' height="700" width="700" src="http://localhost:8181/website"></iframe>
<iframe sandbox="allow-same-origin allow-scripts" id='b' height="700" width="700" src="http://localhost:8181/website"></iframe>
</body>
</html>
When the page loads I need to navigate around in iframe a. At which point I will use javascript or jquery to take the doucment of A and replace B's document with it. Is this even possible? I don't necessarily need to use iframes if there are other options.
Scenario:
1. Page loads, iframe a & b are rendered
2. User navigates inside iframe A to different pages
**below this is functionality I cannot figure out
3. User clicks button to take DOM from iframe a and replace the DOM for Iframe b
This will essentially set the content of iframe b to be where the user had navigated in iframe a
There is a question about jquery and iframe.
The .contents() method can be used to get the content document of an iframe, if the iframe is on the same domain as the main page.
This should work:
var theHtmlStringToSet = $('#frameA').contents().find('body').html();
$('#frameB').contents().find('body').html(theHtmlStringToSet);
Related
Could anyone help me?
Is it possible to code this?
Redirect page inside iframe to another one but we must stay in iframe .
Without influence to parent site.
I tried many scripts but nothing worked.
Here is main code which i use. width and height is only for testing.
I use HTML5 sandbox to prevent iframe breaks to main site.
I need that to hide referer. Now parent site is showed as referer in iframed site, but i want to first site in iframe was used as referer to redirected one. Maybe it is crap, but i need that.
<!DOCTYPE html>
<html>
<body>
<iframe width="1025" height="350" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="URL"; </iframe>
</body>
</html>
If you want the script to run from the frame:
document.location.href = "http://...";
If you want the parent page to redirect (change) the frame location:
HTML:
<iframe name="myFrame" ... />
JavaScript:
window.frames["myFrame"].location = "http://..."
$(function() {
if ('app' !== $('body').attr('id')){
window.setTimeout(function(){
window.top.location.href = 'your redirect url';
}, 5000);
}
});
in IFRAME use
sandbox="allow-top-navigation allow-scripts allow-forms"
I'm trying to create an external link, that appears within the same site.
Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA
My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.
Google
<script type="text/javascript">
function executeOnClick(){
<iframe name="your_frame_name" src="www.google.com" > </iframe>
return true;
}
</script>
I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.
Is there any other way to fix my issue..
No javascript is needed, use target attribute:
Load the page
<iframe id="iframe1"> </iframe>
JSFiddle
IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header
function executeOnClick(){
$('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
return true;
}
try this
The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(target) {
document.getElementById("targetFrame").src = target.src;
return false;
}
</script>
In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:
Google
<iframe name="targetFrame" id="targetFrame"></iframe>
Change to this:
onclick="executeOnClick(this); return false;"
and do this in your funcition:
<script type="text/javascript">
function executeOnClick(elem){
var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
document.body.appendChild(frame); // <----append it here.
}
</script>
In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.
please note that the google.com will not work with iframe
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(src) {
document.getElementById("targetFrame").src =src;
}
</script>
<iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>
Use runat attribute too. Hope this works.
If doesn't, what's the error?
We have a page rendering some affiliate scripts at the bottom. One of the scripts renders an iframe which is breaking our page in some browsers. We would like to keep this iframe from showing, but the only attribute that it is offering me is the src attribute. I cannot broadly target iframes with my CSS as the other generated iframes are necessary for various partners.
Until they get a chance to diagnose their bad code, is there a way for us target this one iframe by its src or something with CSS or JavaScript/jQuery and keep it from showing on the page?
The bad iframe:
<iframe src="https://someurl.net/p.ashx?a=9879&b=3541" height="1" width="1" frameborder="0">
Inside of this iframe the document tree goes:
<html>
<head><head>
<body>
<pre style="word-wrap:break-word; white-space:pre-wrap;">NF</pre>
</body>
</html>
This should do the trick:
$('iframe[#src*="someurl.net/p.ashx"]').hide();
The css method would be:
iframe[src*="someurl.net"] {
display: none;
}
*= means that the attribute must contain the value. In this case, src must contain someurl.net to match. (see doc)
<html>
<title>iframe_test</title>
<head>
</head>
<body>
<iframe src="test_page_with_links.html" width="whatever" height="whatever" /></iframe>
</body>
</html>
I'm trying to figure out a way to make an iframe people can add to their own websites that adds additional navigation links, but if I try to change the window.top.location from within the iframe to let's say /profile, the browser goes to my website that's housing the iframe /profile instead of the website the iframe is on /profile — hope this makes sense
add target="_top" to your links
give your iframe a name and the link a target that matches the name.
<iframe src="whatever.html" name="my_frame">
<a href="http://www.somewhere.com" target="my_frame">
I'd like to make another "context" into my html page. Such as a page loaded by iframe. Now, what I'd like to do is use this iframe but without src.
Somethings like :
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:300px; height:20px;">
<html>
<head></head>
<body>
<div>
Hello World
</div>
</body>
</html>
</iframe>
I need this because I wont use ajax and I need a load a script that could make some problems in the same page-context (as I wrote yesterday on SO).
It seems that this is impossible :(, the only way to create a separate html file.
Source: http://stackprogramer.com/7276457/is-it-possible-to-create-iframe-without-src-but-with-my-html