Hello I try to modify width attribute for all iframe
here what I did :
var editor = tinymce.get('editor1');
var content = editor.getContent();
content = content.replace(/width=".*?"/ig, 'width="660"');
editor.setContent(content);
It works but my regex will modify all tag which contain width attribute and what I want is only modify iframe width attribute
Here's the solution with regex, but I suggest the other solutions, it's better use the DOM API instead regex.
var str = '<p><iframe src="someurl.com" width="540" height="450" scrolling="yes" style="border: none;"></iframe></p><p> toto </p><p><iframe src="someurl.com" width="540" height="450" scrolling="yes" style="border: none;"></iframe></p>';
str = str.replace(/(<iframe.*?)width="\d+"(.*?<\/iframe>)/gu, '$1width="660"$2');
console.log(str);
I would copy the content into a container element and manipulate the DOM, then copy it back into the editor. Like this:
var editor = tinymce.get('editor1');
var content = editor.getContent();
var container = document.createElement('div');
container.innerHTML = content;
var iframes = container.getElementsByTagName('iframe');
Array.prototype.forEach.call(iframes, function(iframe){
iframe.setAttribute('width','660');
});
editor.setContent(container.innerHTML);
As you use jquery I would go this way :
$('iframe').attr("width", function(index,attr) {
return 600;
});
See : https://jsfiddle.net/vj0ohnav/2/
Related
I would like to change the img tag with amp-img tag without removing the img tag attributes and its value.
Here is my code:
var content = '<div><img src="abcd" height="200" width="210"><img src="bcda" width="50" height="25"></div>';
let replace1 = content.replace(/<img/g, '<amp-img'); //So far so good here
let replace2 = replace1.replace(/>/g, '/>'); // Here I would like to append a close for amp-img only, not for all tag
console.log(replace2)
How can I append close tag for amp-img only?
You can use: <img([^>]+)> and this <amp-img$1/> for replacement.
var content = '<div><img src="abcd" height="200" width="210"><img src="bcda" width="50" height="25"></div>';
let replace1 = content.replace(/<img([^>]+)>/g, '<amp-img$1/>');
console.log(replace1)
I actually need to disable autoplay on a vimeo iframe embed on a drupal 6 website.
I can't change this settings in the embedmedia module, so I need to use jQuery to do this.
This is the original "src" vimeo content:
<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&show_title=1&show_byline=0&show_portrait=1&autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
I override the height and width attributes with jQuery already.
So I try to do the same for "src" but my code replace the "src" content:
$("#media-vimeo-1 iframe").attr('src','autoplay=0');
How can I preserve the other part of src content and only change the autoplay setting ?
The second parameter to attr can be a function that processes the old value to get a new value:
$("#media-vimeo-1 iframe").attr('src', function (index, oldSrc) {
return oldSrc.replace('autoplay=1', 'autoplay=0');
});
You must get the old src, replace the desired parameters, and then change the src
$(document).ready(function() {
var oldSrc = $("#media-vimeo-1 iframe").attr("src"); //Get the src of the iframe
var newSrc = oldSrc.replace("autoplay=1", "autoplay=0"); //Replace "autoplay=1" by "autoplay=0"
$("#media-vimeo-1 iframe").attr("src", newSrc); //Change the src attr to the new value
console.log("Old Src: " + oldSrc);
console.log("New Src: " + newSrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="media-vimeo-1">
<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&show_title=1&show_byline=0&show_portrait=1&autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
</div>
In your example youre just setting the src attribute to be autoplay=0
What you realistically want to do is grab the current value, replace a value within the string and reassign the value.
Example (There are better ways to do this):
var link = $("iframe").attr('src');
link = link.replace('autoplay=1', 'autoplay=0');
$("iframe").attr('src', link);
Hope this code help you.
var src = $('iframe').attr('src'); <br>
var searchParams = new URLSearchParams(src); <br>
searchParams.set('autoplay','0'); <br>
var newParams = searchParams.toString(); <br>
$('iframe').attr('src', decodeURIComponent(newParams)); <br>
Source code: https://github.com/sendeveloper/stackoverflow/tree/master/javascript_src_autoplay
I have an iframe that looks like this:
<iframe id="feed" width="100%" height="100%" frameborder="0" src="http://foo.com/bar"></iframe>
I want to change styles, remove and add elements to the iframe
I tried using this:
function iframeRef(frameRef) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
var inside = iframeRef(document.getElementById('feed'));
var elem = inside.createElement('p');
elem.style.zIndex = '2';
elem.style.position = 'absolute';
elem.innerHTML = 'TEXT';
inside.body.appendChild(elem);
But it doesn't work, how can I manipulate the DOM from the iframe?
I Have a div something like this
<div id="tid">
<iframe>
<html>
<body>
<scripts></scripts>
<iframe>...
//more content
<ifram>
</body>
</html>
</iframe>
</div>
I want to get below using javascript.
<iframe>
<html>
<body>
<scripts></scripts>
<iframe>...
//more content and cannot guess how many iframes are there.
<ifram>
</body>
</html>
</iframe>
InnerHtml only return first iframe only. I tried with .contentDocument.getElementsByTagName('body')[0].innerHTML. but this only return first iframe. I want get all the content into string variable without using jquery.
Thanks
YOU NEED TO REPLACE < WITH < AND > WITH > TO PRINT HTML TAGS AS A PLAIN TEXT.
try this code,
var content = document.getElementById('tid').innerHTML;
content = content.replace(/</g,"<").replace(/>/g,">");
document.getElementById('content').innerHTML = content;
SEE THIS DEMO
if you want to reuse that div html, simply add that content to any other html element like below,
var content = document.getElementById('tid').innerHTML;
//the variable content contains the html inside "tid" div.
var iDiv = document.createElement('div');
iDiv.id = 'newDiv';
iDiv.innerHTML = content;
document.getElementsByTagName('body')[0].appendChild(iDiv);
SEE THIS DEMO
If you only want the body tags this should work.
var els = document.getElementsByTagName("body");
var allContent = "";
for (var i=0; i < els.length; i++) {
allContent += els[i].innerHTML;
}
Do this
var iframe = document.getElementById('iframeID');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
now you can use iframeDocument to access content of iframe, jquery does the same
UPDATE
You can do something like this ..
var myDiv = document.getElementById("tid");
var iframes = myDiv.getElementsByTagName("iframe");
// now loop over the iframes
for(iframe in iframes){
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var internalIframes = iframeDocument.getElementsByTagName("iframe");
if(internalIframes.length > 1){
// start the for in loop again
}
}
can not do this because of same origin policy
I have a website with an iFrame element inside it. Now I need to remove a particular element from the website that is being loaded in the iFrame.
I am using javascript. The link mentioned is in the same server. I loaded the jquery in the head of the site.
<iframe id="ContentiFrame" src="LINK" class="section main" width="998" height="200" frameBorder="0">
</iframe>
<script>
$(this).load("LINK")
$(window).on('load', function()
{
var $iframe = $('#ContentiFrame'); //this is the name of the iframe ... EDITED added #before name
var $contents = $iframe.contents();
var $logo = $contents.find('.logoContainer');
$logo.remove();
});
</script>
For some reason, this is not working for me. Thanks for any help.
You forgot the # on the ID of the iFrame.
Try this:
var $iframe = $('#ContentiFrame');
^
You need to use # for id
var $iframe = $('#ContentiFrame');
Use Jquery scope parameter：
var iframe = $('#ContentiFrame');
var iframebody=$iframe.get(0);
var body=iframebody.contentWindow.document.body;
var logo=$("#ContentiFrame",body);
logo.remove();
I sugget include a jquery.js in iframe page,so you can do like this:
var iframe = $('#ContentiFrame');
var iframebody=$iframe.get(0);
var frameWindow=iframebody.contentWindow;
var logo=frameWindow.$("#ContentiFrame");
logo.remove();