How to Access the Contents of an Iframe With JavaScript/Jquery

How to access the content of an iframe with jQuery?

You have to use the contents() method:

$("#myiframe").contents().find("#myContent")

Source: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

API Doc: https://api.jquery.com/contents/

How can I access the contents of an iframe with JavaScript/jQuery?

I think what you are doing is subject to the same origin policy. This should be the reason why you are getting permission denied type errors.

Getting the contents of iframe

You don't need jQuery to do this necessarily.

var iFrame = document.getElementById('iFrameId').contentDocument;
var desiredElement = iFrame.getElementById('pageBreaker');

Using the document API we can easily get the iFrame element and pull the content document out of it. Then it is trivial locating an element via its ID.

Getting the HTML content of an iframe using jQuery

.contents().html() doesn't work to get the HTML code of an IFRAME. You can do the following to get it:

$(editFrame).contents().find("html").html();

That should return all the HTML in the IFRAME for you. Or you can use "body" or "head" instead of "html" to get those sections too.

How to get the content of iframe using jQuery or C#?

I don't know your code. But if you have an iframe with "iframe" id, try this;

var content = $('#iframe #message-box').html();

How to load and execute jQuery content in an iframe?

You can use srcdoc, not all browser support this

do whatever you want in this attr

$( document ).ready(function() {

console.log($('#myIframe'))

// Add jQuery lib

$('#myIframe').attr('srcdoc', "<!DOCTYPE html>" +

"<html>" +

"<head>" +

"<meta charset=\"utf-8\">" +

"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">" +

"<title><\/title>" +

"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"><\/script>" +

"<script>" +

"$(function () {" +

"$('body').html('<div id=\"myDiv\">Initial<\/div><button id=\"myButton\">Click to change<\/button>');" +

"$('#myButton').on('click', function () {" +

"$('#myDiv').html('Changed');" +

"});" +

"})" +

"<\/script>" +

"<\/head>" +

"<body>" +

"<\/body>" +

"<\/html>")





});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe id="myIframe"></iframe>

Selecting an element in iframe with jQuery

var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Also note that if the src of this iframe is pointing to a different domain, due to security reasons, you will not be able to access the contents of this iframe in javascript.

How to access the contents of an iframe using jQuery or javascript

use javaScript to get the DOM of your iframe like this:

var doc=window.frames[ "yourFrameName" ].document

NOTE: Use name not id or class of your frame if you are following above rule to get the DOM of your frame

change this to jquery object

var elem=$(doc);

now bind click event on elem as you are doing in code in your question

elem.click(function () {

elem.find('a[target="_blank"]').each(function () {

$(this).attr('target', '_self');
});

});

Modifying the HTML content of an iframe using jQuery

It looks like the code is executing before the iframe contents has actually loaded. Try this code:

$(document).ready(function(){
var $iframe = $("iframe");
$iframe.on('load', (function(){
$iframe.contents().find("body").append("<p>test2</p>");
});
});


Related Topics



Leave a reply



Submit