I have an iframe as such:
<iframe src="https://www.something.com/somecontent"> </iframe>
Now I wanna render the same content, exact same iframe elsewhere in the page but I don't wanna hit the URL again,
how can I do this? is it even possible?
I have seen other answers but none helped!
Related
I have a reCaptcha in an iframe on my page. The reCaptcha changes it size, but the iframe not. I saw a few topics that address this problem. They work if the content stays the same during page load. But they do not work if the content changes when the page is loaded, this is happening in my case.
So my question is: how do I make an iFrame adjust size when the page is loaded if the iframe changed size using only html, css and if needed javascript . This is my html code:
<div>
<iframe aura:id="vfFrame" src="/partners/B2B_ReCaptcha" frameborder="0"
width="100%" allowtransparency="true" />
</div>
Any tips on how to tackle this problem?
I'm trying to integrate wetransfer into a website through an iframe, but I'm having a problem when the page loads, it jumps half-way down page, so it focuses on the iframe, instead of opening at the top of the page.
From what I can tell, there is a script on the wetransfer site that's telling it to jump to that section, instead starting at the top of the page. How can I get it to ignore the script by wetransfer or after the iframe's loaded to tell it to move back to the top of the page?
With jquery I tried $('html').scrollTop(0); after initiating the iframe, but it still doesn't work.
On the website I have jquery calculate the height of the user's screen and then set the header to that size, with a full background and navigation and than the iframe starts below that. So setting the position to absolute or anything along those lines, wouldn't work.
I created a very simple jsfiddle example just to show how the page opens scrolled halfway down the page. It only does this when the iframe source is wetransfer and not with any other source.
https://jsfiddle.net/dbruning22/c0s6mhkv/6/
HTML
<header>
Some Header information and navigation
</header>
<div class="main">
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>
CSS
header {
background: green;
height: 600px;
}
This worked for me:
1) You initially hide the iframe by setting the display to none:
<iframe id="bmap" src="xxx.xxxx.xxx" style="display:none;" frameborder="0">
2) Once the page has loaded, then show the iframe using jquery or javascript:
window.onload = function ()
{
$("#bmap").show();
}
This worked for me across browsers
You can put an anchor at the top of your page like this:
HTML
<header>
<a id="focus" href="#focus"></a>
Some Header information and navigation
</header>
On page load use this JS:
document.getElementById("focus").focus();
As none of the above worked for me after numerous tests, another trick, because a lot of sites now have a "scroll to top" button, especially useful if page structure cannot be easily modified (like a wordpress theme ...):
jQuery(".scroll-top-button").trigger("click");
Just forcing a click on that button ... that is really cross browser :-) (if jquery supported of course) ....
This is quite a blunt solution, but you can block all scripts from running in the iframe using the sandbox attribute.
<iframe src="https://example.com" style="width: 100%; height: 250px" sandbox>
NB: An empty value blocks all same-origin resources, including images. You might prefer sandbox="allow-same-origin".
suppose I have an Iframe from other site in my page and there some links to other sites.
I want to do this
when a user click on a link in the iframe instead to navigate to the destination, the page navigate to URL I interest
<iframe src="......." width="100%" height="100%"
align="middle" frameborder="0" scrolling="yes"> </iframe>
if you are opening a cross-domain iframe it is not possible to alter the contents or for the sake anything on the page. In case you want to achieve a similar effect what you can do is
1) Save the page as HTML
2) Change the to the webiste.com so that everything works properly
3) Host this page locally on your server
4) now what you can do is open this page as iframe src so it become same domain iframe, and you can modify whatever you want just writing $('iframe').contents().<your code>
It seems like a manual process but you can write a PHP or .NET script to achieve the effect, thats how i had done it and it works perfectly.
I have a iframe that is included in another page (mother page).
<iframe name="commentsiframe" id="commentsiframe" onLoad="autoResize('commentsiframe');" width="100%" src="iframe.php" scrolling="no" marginheight="0" frameborder="0" ></iframe>
What if i have a
go top
in the iframe page. And when i click on it i want to manipulate the main page/mother page and make it go on top.
I have no ideea if it is possible, but i assume if yes it must be javascript!
Try using target="_top" or target="_parent" as attribute in the a-tag. Check out here
If the domain of the iframe and mother page are the same , then its easy
Use:
window.parent.scrollTo(0,0); //you can call any global function of the mother page
if the domain's are different , then its a bit difficult :
Refer to this question :
Cross domain iframe issue
I was hoping that someone can help me, I am trying to get the URL of a page in a iframe:
<script language="JavaScript">
function myLocation() {
alert(document.all.myFrame.contentWindow.location);
}
</script>
<button onclick="myLocation();">Location of Frame</button>
<iframe src="http://www.google.com" width="800" height="600" frameborder="0"
scrolling="auto" name="myFrame"></iframe>
This basically will give me the location of the iframe in my page, but does not give me the google.com url - it is also important to give me the url of everypage that I may open from the google results, so when I am on google.com it should give me the google.com url and if I browse to www.facebook.com it should give me the facebook url...
Any ideas welcome! Thanks
The same origin policy prevents accessing details (including the current URI) of documents on other domains.
If you want to work around this, you will either need to use something other than a web page (such as a standalone application or browser extension) or proxy all requests through your own server.
you may want to use some sort of javascript library, but i've tried this code on deviantart.com using raw javascript code:
document.getElementsByTagName('iframe')[0].src and it gave me the result i was expecting.