change the navigation of an iframe - javascript

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.

Related

<iframe> Border removing, using inline script which is included within file

we have index.html in which second.html is included using iframe,
Now, as we see the iframe border in index.html
Requirement here is we need to write inline script in second.html, so that while rendering second.html in index.html, it'll remove iframe border.
we are not allowed to make any changes in that page where iframe included i.e. index.html
<div class="external">
<iframe src="/folder/second.html" width="100%" height="700"></iframe>
</div>
please suggest me the approach to remove iframe border using the file which is included in html using iframe
Sample Image:
Add this to your code
<iframe src="/folder/second.html" style="border:none;"height:700px;width:100%"><iframe>
Iframe is used to show other content in our web page. You can show videos,images and other web pages in Iframes.
You cannot make any changes in renderer for security reasons.
If that happened....then,
scripts, styles and all parts of both web pages will mix and will change design and functioning of both pages
You cannot change border of iframe from second.html. You should make changes in index.html:
<iframe style="border:0;"></iframe>
However you can make changes in some rendering pages of iframe

How to insert iframe in wordpress using dashboard

I want to insert iframe in my wordpress website.
however i am unable to do so.
here is my code:
<iframe id="eventListIframe" src="http://www.example.com/widgets/eventList_.php?id=781ea4dab64042de4fbdc6d9102ef0e7" frameborder="0" scrolling="no" style="width:100%;" ></iframe><script type="text/javascript" src="http://www.example.com/widgets/iframeResizer.min.js"></script><script type="text/javascript">iFrameResize({log:false,enablePublicMethods:true});</script>
when i check on my website , i get iFrameResize({log:false,enablePublicMethods:true}); text as output.
To embed one web page (the data visualization) inside a second web page (the organization's website), we use a simple HTML code known as iframe.
WordPress removes iframe html tags because of security reasons. Iframe shortcode is the replacement of the iframe html tag and accepts the same params as iframe html tag does. You may use iframe shortcode to embed content from YouTube, Vimeo, Google Maps or from any external page.
https://wordpress.org/plugins/iframe/
If you want to go through other way - Code
https://wordpress.stackexchange.com/questions/20202/embed-iframe-or-html-page-into-dashboard-widget

Prevent page to jumping to iframe

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".

simulate referer iframe with javascript?

my question is this
I have 2 sites, SiteA, SiteB, and what I want is to pretend that the traffic of a website through an open iframe in SiteA, simulate SiteB come from, for example we have:
*SitioA.com/index.php
*SitioB.com/redirect.php (Placed a javascript that redirects to the site I want it to open in the iframe, so the javascript code clears the referrer)
In SitioA.com/index.php, I put an iframe to call SitioB.com/redirect.php, which, in turn redirects with javascript to the web that I want to simulate the referer, here I leave the code to understand better:
In SitioA.com/Index.php I put:
<iframe class="premium_frame" src="http://SitioB.com/redirect.php" width="1000" height="1000" scrolling="no" frameborder="0"></iframe>
In sitioB.com/redirect.php, I put:
window.location.href = "http://jaqhegrjghegr.com";
Doing this is no way to jaqhegrjghegr.com for example, discover that the check actually comes from SiteA and not SiteB? that's my question

Calling function from iframe not loading

I am trying to call a parent function from inside of an iframe to remove the container div however it seems to be failing and I am unsure why. I am wondering if it is because the iframe loads before the parent window and so the function is not yet defined.
Here is my parents html:
<div align="center" id="review-embed-container" style="position: relative;">
<iframe frameBorder="0" id="review-embed-iframe" src="http://www.trampolinesshop.co.uk/review/Review-Embed.php?code=1&prod_name=test" scrolling="no" width="100%">
</iframe>
</div>
And the parents jQuery:
function InjectIframeReview() {
$("#review-embed-container").hide();
};
Now inside the Iframe page I have php that checks to see if reviews are placed, if there are no reviews it calls this javascript:
<script type="text/javascript">
window.parent.InjectIframeReview();
</script>
I can't seem to find out why the function is not firing correctly, you can see the full website it is loaded on here:
Websites JQuery (function is on line 387):
http://www.trampolinesshop.co.uk/acatalog/custom.js
A page that has no reviews (iframe on line 902 of source code):
http://www.trampolinesshop.co.uk/acatalog/8ft_Skyhigh_Trampoline_and_Safety_Enclosure.html
The Iframe that gets loaded (no review for product so just has javascript):
http://www.trampolinesshop.co.uk/review/Review-Embed.php?code=3271d&prod_name=8ft%20Skyhigh%20Trampoline%20and%20Safety%20Enclosure
A page that has a review:
http://www.trampolinesshop.co.uk/acatalog/8ft_Fun_Pink_Trampoline.html
The Iframe that gets loaded (has review so does not use javascript):
http://www.trampolinesshop.co.uk/review/Review-Embed.php?code=3269&prod_name=8ft%20Skyhigh%20Pink%20Trampoline%20and%20Safety%20Enclosure
Chrome security May be you are using chrome. If you are using chrome this problem may affect only in local server because your chrome check your domain. But when you upload it on it will work because that time your domain will same as iframe domain. So now just check it on other browsers.
This issue will solved when you upload it into live. Check this

Categories

Resources