There's a <iframe> element from external site, containing a textarea, in one of my blogger posts. I already added couple more posts after that. But when I open the site, the blog scrolls down to the <iframe> becuase it posseses the focus. How to prevent this so that when the blog is opened, the latest post can be seen?
This is how I added the iframe in the blog post.
<iframe border="no" allowtransparency="true" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="some external site reference" width="100%">
</iframe>
FYI, the blogger has dynamic views template.
I tried using scrollTo(), focus() to the latest post header. But it didn't work. I found that even if I print the count of article headers inside $(document).ready(), it returns 0. After the page fully loads, if I go to the console and re-print the length, only then it gives 10. Quite confused about how the blogger handles its posts.
<script>
$(document).ready(function(){
console.log( $('div.article-header').length ); // returns 0
});
</script>
Update
It looks like Blogger Dynamic Views loads the blog posts using AJAX. As a consequence, the document ready() gets called before the actual blog contents are fully loaded. 'Jeffery To' has given a good explanation about this below:
prettyPrint() doesn't get called on page load
Thanks.
$('body').scrollTo('#foobar');
Would a tabindex=1 in your blog title suffice?
Or add?
$(function() {
$("h1").first().focus()
});
H1 being your page title
[edit]
It's not blogger that is setting the focus on this textarea but it's the code within this iframe. It appears to be a big pain to prevent this behaviour due to cross domain scripting.
My advise? Alter your post by replacing the iframe with a simple hyperlink.
Related
I have designed a website containing an iframe that loads another website that I previously designed in Django. However, the content website contains links to pages that may or may not be contained in an iframe. To solve this problem, my iframe would have to be able to know if a link leads to a page that it can contain and if not open the page of the link in a new tab. However, I don't know which property to use in order to know if a page allowing loading in an iframe. Also, I hope to get your help. Here is the code of my iframe:
export default function SearchEngine() {
return (
<iframe
width="100%"
height="1300"
src="https://gkwhelps.herokuapp.com"
></iframe>
);
}
Thanks!
So yesterday i submitted a sample website to my teacher and she spoke in a real condescending manner and asked me to replace the href tag with the iframe tag, when i told her they both have different usage she asked me to shut up and use the iframe tag to link my webpages together. I have no clue how to do that please do help. Is it possible to replace href with iframe?? if yes how can it be done?
All help is appreciated.
Here's how most HTML designers would describe the two tag types:
An iFrame is HTML that pulls a "raw" search form into a window within a page. The iFrame is still considered a link by search engines, but the content appears to be displayed on the website itself.
A link sends visitors to a page that displays the form content, while embedding the navigation, sidebar, and footer of the primary website.
What do these two HTML tags look like?
An iFrame tag looks something like this:
<iframe src="myIDXformpage.php" height="300" width="100%"> </iframe>
A link looks like this:
MLS Search
I added an iframe in my webpage. I want to add a div inside of that iframe. But i have not been able to do so. If anyone can help me with this one, i would be very thankful.
The code that i used is given below.
`<div class="text-column">
<?php
$url="https://secure.activecarrot.com/public/facility/index/33/768";
?>
<iframe src="<?php echo($url); ?>" width="100%" height="1000px" frameborder="0"></iframe>
</div>`
You will need to use Javascript to inject the content into your iframe after the page has loaded: \
Create an <iframe> element and append html content to it with jQuery
However, be careful appending to an iframe: the third party using it probably expects to send and receive the same content, and injecting code into it may cause whatever function it performs to fail.
Edit: others have cited security concerns, and they are justoified. However, it is technically possible to do what OP hs requested.
You need to inject the content after the page has loaded because the iframe pulls and overwrites content on page load. If the iframe does not need to send anything back to the server at any point there is no reason you cannot add extra elements to an iframe. Every case is different.
I am afraid you will not be able to do this, since iframe is a way to inculde an external page (to put it simple), hence you can not alter pages in iframes.
Regards,
Spyros
Hi trying to get this working.
Have an iframe in a div. i am loading the iframe with:
<iframe src="abc.com" id="divtoshow" border="0" scrolling="no" allowtransparency="true"></iframe>
is it enough to type id to tell the iframe to only load that div and ignore other divs code on page.
the next part is remove columns and rows in the table the iframe loaded. how do remove more then 1 of each? and is it the same to remove rows?
$('table tr').each(
function(tr_idx,el){
$(el).children('td').each(
function(td_idx,el2){
//i'm removing first columns..
if(td_idx == 0){
el2.remove();
}
});//inner each
});//outer each
thank you
Dwhizz,
Unless you are loading an iframe from the same domain it is HIGHLY unlikely (read as : impossible) to muck around with the contents of the iframe using any scripting language. This is baked into the browsers and is a security issue.
So the quick answer is "No, you will not be able to do this, stop trying"
If you can get at the domain you are trying to load via AJAX then you might have some luck using jquery's AJAX.load shortcut.
reading: http://developer.chrome.com/extensions/xhr.html and do some google on "cross domain AJAX" or "cross domain iframe"
Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/
As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.
It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/
If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)